/*
 * The design tokens: every colour, shadow and gradient our pages use, and
 * the only stylesheet with colour values in it (see "Colour and themes" in
 * docs/DESIGN.md). Each token holds its light and its dark value with
 * light-dark(), so the theme is just color-scheme: Auto follows the device,
 * and data-theme on <html> fixes light or dark. data-palette on <html>
 * picks one of the eight palettes, on the page or on one element; /brand.css
 * sets an instance's brand, naming the tokens here or its own two colours.
 *
 * packages/ui/test/tokens.test.js reads this file and checks the contrast
 * of every palette in both themes, so keep one declaration per line.
 */

:root {
  color-scheme: light dark;

  --bg: light-dark(#f5f4f0, #121211);
  --surface: light-dark(#ffffff, #1c1c1a);
  --surface-2: light-dark(#f1f0ea, #252522);
  --surface-3: light-dark(#e7e5dd, #30302c);
  --text: light-dark(#1b1b19, #eceae4);
  --muted: light-dark(#5c5b56, #b3b1aa);
  --faint: light-dark(#696862, #9c9b95);
  --border: light-dark(#e2e0d8, #33332f);
  --control: light-dark(#8c897f, #7d7c74);
  --danger: light-dark(#b3261e, #ffb4ab);
  --danger-soft: light-dark(#fbe9e7, #3b1a16);
  --danger-inv: light-dark(#ffb4ab, #b3261e);
  --ok: light-dark(#1d6b3a, #97d5a8);
  --ok-soft: light-dark(#e4f3e9, #15301e);
  --warn: light-dark(#7a4b00, #ffd88a);
  --warn-soft: light-dark(#fff2d1, #382a0b);
  --on-accent: light-dark(#ffffff, #0d1626);

  /* Chart lines and bars, in order, the same in every palette; --control is Other. */
  --chart-1: light-dark(#1f5fbf, #8fb4f5);
  --chart-2: light-dark(#b45309, #fdba74);
  --chart-3: light-dark(#0f766e, #5eead4);
  --chart-4: light-dark(#9d174d, #f9a8d4);
  --chart-5: light-dark(#6d28d9, #c4b5fd);
  --chart-6: light-dark(#4d7c0f, #bef264);

  /* The eight palettes, each an accent and a second colour. */
  --palette-trio-accent: light-dark(#1f5fbf, #8fb4f5);
  --palette-trio-second: light-dark(#0e8a80, #5fd0c4);
  --palette-forest-accent: light-dark(#1d6b3a, #8fd6a8);
  --palette-forest-second: light-dark(#6b8a00, #c5e06b);
  --palette-sunset-accent: light-dark(#b93d0b, #fdba74);
  --palette-sunset-second: light-dark(#be185d, #f9a8d4);
  --palette-plum-accent: light-dark(#6d28d9, #c4b5fd);
  --palette-plum-second: light-dark(#c0267a, #f9a8d4);
  --palette-ocean-accent: light-dark(#0369a1, #7dd3fc);
  --palette-ocean-second: light-dark(#0e7490, #67e8f9);
  --palette-graphite-accent: light-dark(#334155, #cbd5e1);
  --palette-graphite-second: light-dark(#2563eb, #93c5fd);
  --palette-ruby-accent: light-dark(#b91c1c, #fca5a5);
  --palette-ruby-second: light-dark(#c2410c, #fdba74);
  --palette-gold-accent: light-dark(#875800, #fcd34d);
  --palette-gold-second: light-dark(#a2410c, #fdba74);

  /* The trio palette, until data-palette or /brand.css says otherwise. */
  --accent: var(--palette-trio-accent);
  --accent-2: var(--palette-trio-second);

  /* Shades mixed from the accent, so a palette is only two colours. */
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --accent-softer: color-mix(in srgb, var(--accent) 7%, var(--surface));
  --accent-hover: color-mix(in srgb, var(--accent) 80%, var(--text));
  --accent-line: color-mix(in srgb, var(--accent) 40%, var(--border));
  --accent-top: color-mix(in srgb, var(--accent) 88%, var(--mix-light));

  /* For mixing lighter and darker shades. */
  --mix-light: #ffffff;
  --mix-dark: #000000;

  --shadow-s: 0 1px 2px light-dark(rgb(20 20 18 / 6%), rgb(0 0 0 / 40%));
  --shadow: 0 1px 2px light-dark(rgb(20 20 18 / 5%), rgb(0 0 0 / 35%)), 0 8px 24px light-dark(rgb(20 20 18 / 7%), rgb(0 0 0 / 28%));
  --shadow-l: 0 16px 48px light-dark(rgb(20 20 18 / 20%), rgb(0 0 0 / 60%));
  --shine: inset 0 1px 0 rgb(255 255 255 / 22%);
  --scrim: light-dark(rgb(12 12 10 / 38%), rgb(0 0 0 / 60%));
  --glass: color-mix(in srgb, var(--surface) 78%, transparent);

  /* A course thumbnail's letter: a light shadow in light, none in dark. */
  --thumb-shade: light-dark(rgb(0 0 0 / 25%), transparent);
  --thumb-ring: light-dark(rgb(0 0 0 / 6%), rgb(255 255 255 / 8%));

  /* People's initials sit on one of these; they are decorative, next to the name. */
  --avatar-text: #ffffff;
  --avatar-1: linear-gradient(135deg, #3b6fd8, #2a7f96);
  --avatar-2: linear-gradient(135deg, #7c4ddb, #c13a7f);
  --avatar-3: linear-gradient(135deg, #b85e05, #b23c0b);
  --avatar-4: linear-gradient(135deg, #0f766e, #4d7c0f);
  --avatar-5: linear-gradient(135deg, #475569, #2558d0);
  --avatar-6: linear-gradient(135deg, #be123c, #8b2fd6);

  /* The little people in the website's story (see The website in docs/DESIGN.md): one light olive skin for everyone, and hair that is blonde, ginger, auburn, brunette or black, more often the first three, the same in both themes. */
  --figure-skin: #d9b68e;
  --figure-hair-1: #171412;
  --figure-hair-2: #4a3125;
  --figure-hair-3: #7a301c;
  --figure-hair-4: #c8622a;
  --figure-hair-5: #e2c06e;

  /* QR codes are always dark on light, whatever the theme, so phones can read them. */
  --qr-light: #ffffff;
  --qr-dark: #000000;
  /* Behind a lesson, as courses expect. */
  --stage: #ffffff;

  /* The brand fonts (see Branding in docs/DESIGN.md): only fonts already on the device. */
  --font-clean: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", Nunito, system-ui, sans-serif;
  --font-classic: ui-serif, "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  --font-humanist: Optima, Candara, "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --font: var(--font-clean);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  /* The brand corner styles: cards, then controls. */
  --radius-square: 4px;
  --radius-s-square: 3px;
  --radius-soft: 10px;
  --radius-s-soft: 8px;
  --radius-default: 14px;
  --radius-s-default: 10px;
  --radius-round: 20px;
  --radius-s-round: 14px;
  --radius: var(--radius-default);
  --radius-s: var(--radius-s-default);
}

/*
 * The website (body.site, see The website in docs/DESIGN.md): backgrounds
 * tinted from the trio blue rather than the apps' warm greys, a soft blue
 * page in light with white cards and bands, and a deep navy in dark. The
 * shades mixed from these (--accent-soft, --glass) follow, as they are
 * worked out on the same element.
 */
:root:has(> body.site) {
  --bg: light-dark(#eef3fa, #0b1220);
  --surface: light-dark(#ffffff, #121b2d);
  --surface-2: light-dark(#e5ecf6, #18233a);
  --surface-3: light-dark(#d6e0ee, #212e48);
  --text: light-dark(#121a2b, #e6ecf5);
  --muted: light-dark(#4a5568, #a9b4c6);
  --faint: light-dark(#5a6577, #94a0b3);
  --border: light-dark(#d5deeb, #243150);
  /* The website's colour (see The website in docs/DESIGN.md): the hero's
     glows and dots, the bands' washes in turn (blue to teal, teal to
     lavender, lavender to blue) and the eyebrows' pill. */
  --site-glow-1: light-dark(rgb(31 95 191 / 22%), rgb(80 130 240 / 26%));
  --site-glow-2: light-dark(rgb(14 138 128 / 18%), rgb(60 200 185 / 18%));
  --site-glow-3: light-dark(rgb(124 77 219 / 10%), rgb(150 110 240 / 14%));
  --site-dots: light-dark(rgb(31 95 191 / 22%), rgb(143 180 245 / 18%));
  --site-wash-blue: light-dark(#e8f0fd, #10203d);
  --site-wash-teal: light-dark(#e6f6f3, #0e2a2b);
  --site-wash-lavender: light-dark(#ece8fb, #1b1a3a);
  --site-pill: color-mix(in srgb, var(--accent) 12%, transparent);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

[data-palette="forest"] {
  --accent: var(--palette-forest-accent);
  --accent-2: var(--palette-forest-second);
}

[data-palette="sunset"] {
  --accent: var(--palette-sunset-accent);
  --accent-2: var(--palette-sunset-second);
}

[data-palette="plum"] {
  --accent: var(--palette-plum-accent);
  --accent-2: var(--palette-plum-second);
}

[data-palette="ocean"] {
  --accent: var(--palette-ocean-accent);
  --accent-2: var(--palette-ocean-second);
}

[data-palette="graphite"] {
  --accent: var(--palette-graphite-accent);
  --accent-2: var(--palette-graphite-second);
}

[data-palette="ruby"] {
  --accent: var(--palette-ruby-accent);
  --accent-2: var(--palette-ruby-second);
}

[data-palette="gold"] {
  --accent: var(--palette-gold-accent);
  --accent-2: var(--palette-gold-second);
}

[data-palette="trio"] {
  --accent: var(--palette-trio-accent);
  --accent-2: var(--palette-trio-second);
}

/*
 * The shades mixed from the accent, again wherever a palette is set on an
 * element (the brand editor's previews), since a mix is worked out where it
 * is declared.
 */
[data-palette] {
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --accent-softer: color-mix(in srgb, var(--accent) 7%, var(--surface));
  --accent-hover: color-mix(in srgb, var(--accent) 80%, var(--text));
  --accent-line: color-mix(in srgb, var(--accent) 40%, var(--border));
  --accent-top: color-mix(in srgb, var(--accent) 88%, var(--mix-light));
}