/* Design tokens for every page on every host (copied to apps/worker/public/assets/tokens.css by
 * tools/copy-ui.mjs; edit only here). The colours are intalg-site public/assets/site.css's
 * (light, and dark by the device's setting or by the theme choice on <html data-theme>), which met
 * WCAG 2.2 AA there: text 4.5:1 and more on --bg and --surface, --control-border 3:1 and more
 * against --bg, --surface, --sunken and --track (WCAG 1.4.11). The 44px target is Course-Platform
 * packages/ui/tokens.css's --hit, at the WCAG 2.5.8 size the old site used.
 *
 * Width tiers (Course-Platform packages/ui/tokens.css and intalg-site site.css, the responsive plan
 * of 2026-11-01), written in em so a larger default text size moves a device to a narrower tier:
 *   T1 Phone    max-width: 30em            to 480 px    every phone held upright (320-440)
 *   T2 Narrow   30.00125em to 56.25em      481-900      phones on their side, iPads upright, 200 % zoom on a laptop
 *   T3 Small    56.25125em to 63.99875em   901-1023     small laptop windows
 *   T4 Laptop   64em to 99.99875em         1024-1599
 *   T5 Large    min-width: 100em           1600 up
 * Modifiers: Short (max-height: 31.25em) and Touch (pointer: coarse). */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --sunken: #f7f8fa;
  --text: #16181d;
  --text-2: #2a2e36;
  --muted: #5b6270;
  --border: #e6e8ee;
  --accent: #2f5bd3;
  --accent-text: #ffffff;
  --accent-soft: #f3f6fe;
  --accent-ink: #2346a8;
  --chip: #e8eefc;
  --wordmark: #c8323a;
  --good: #1f7a45;
  --good-soft: #eef8f2;
  --bad: #b3261e;
  --bad-soft: #fdf1f0;
  --warn: #8a4b00;
  --warn-soft: #fff6e8;
  --track: #edf0f5;
  --control-border: #7d8491;
  --shadow: 0 1px 2px rgba(22, 24, 29, 0.04);
  --theme-pill: var(--surface);
  --theme-pill-shadow: 0 1px 3px rgba(22, 24, 29, 0.18);
  --radius: 12px;
  --radius-control: 10px;
  --hit: 44px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1115;
    --surface: #171a21;
    --sunken: #13161c;
    --text: #e8eaef;
    --text-2: #d3d7df;
    --muted: #a0a7b4;
    --border: #262b35;
    --accent: #8ea8ff;
    --accent-text: #0d1020;
    --accent-soft: #1a2340;
    --accent-ink: #b3c4ff;
    --chip: #1f2a4d;
    --wordmark: #ff6b6b;
    --good: #6fd39a;
    --good-soft: #12261b;
    --bad: #ff8a80;
    --bad-soft: #2e1716;
    --warn: #ffb44d;
    --warn-soft: #2a2010;
    --track: #262b35;
    --control-border: #737a88;
    --shadow: none;
    --theme-pill: var(--chip);
    --theme-pill-shadow: none;
  }
}

/* The same dark tokens, chosen on this device whatever the system's setting. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1115;
  --surface: #171a21;
  --sunken: #13161c;
  --text: #e8eaef;
  --text-2: #d3d7df;
  --muted: #a0a7b4;
  --border: #262b35;
  --accent: #8ea8ff;
  --accent-text: #0d1020;
  --accent-soft: #1a2340;
  --accent-ink: #b3c4ff;
  --chip: #1f2a4d;
  --wordmark: #ff6b6b;
  --good: #6fd39a;
  --good-soft: #12261b;
  --bad: #ff8a80;
  --bad-soft: #2e1716;
  --warn: #ffb44d;
  --warn-soft: #2a2010;
  --track: #262b35;
  --control-border: #737a88;
  --shadow: none;
  --theme-pill: var(--chip);
  --theme-pill-shadow: none;
}