/* ============================================================================
   tokens.css — THE design tokens. The single source of the visual language.
   DIRECTION (per client + HKJC context): warm · light · minimal. The users are
   teachers of neurodivergent children and the children themselves — already
   stressed; the interface must feel light, calm and kind, never clinical.
   - LIGHT MODE IS THE DEFAULT (always). Dark exists only via the explicit
     toggle (`:root[data-theme="dark"]`) — never add an OS-preference
     auto-switch media query (tested in test_default_light_theme).
   - Accent = a calm deep blue that sits comfortably beside HKJC's blue
     identity, softened onto warm paper. Semantics: amber = "needs a look"
     (never alarm-red for children), sage = good news.
   - All colour pairs meet WCAG AA on their intended grounds.
   To restyle the whole app, edit ONLY this file.
   ========================================================================== */
:root {
  /* ---- warm light ground ---- */
  --bg:       #faf7f2;   /* warm paper */
  --surface:  #ffffff;
  --raise:    #f5f0e8;   /* warm sand panels */
  --line:     #e9e2d6;   /* soft warm border */

  --ink:      #33302a;   /* warm charcoal text */
  --muted:    #6d675c;   /* secondary text (AA on paper) */
  --faint:    #6f6859;   /* labels / meta — AA (4.87:1 on sand panels); was #8f887a which failed */

  /* ---- accent & semantics ---- */
  --primary:      #2456a6;  /* calm JC-adjacent blue */
  --primary-soft: #e9eff8;
  --primary-ink:  #1c4585;

  --success:       #3f7d5c;  /* sage — good news (fills) */
  --success-soft:  #e4f0e9;
  --success-ink:   #2f6247;  /* text-on-soft: 6.06:1 on success-soft (pills) */
  --attention:     #96631a;  /* warm amber — "needs a look", gentle; AA with white on buttons (5.13:1) */
  --attention-soft:#f9edd8;
  --attention-ink: #8a5a12;  /* text-on-soft: 5.11:1 on attention-soft (pills) */
  --danger:        #b04a3a;  /* staff-facing critical only, warm red */
  --focus:         #2456a6;  /* keyboard focus ring */
  --btn-fg:        #ffffff;  /* text on filled buttons; flips dark in the dark theme for AA */

  /* ---- shape & depth (minimal: soft radii, whisper shadows) ---- */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(80, 68, 48, .04), 0 6px 18px rgba(80, 68, 48, .06);

  /* ---- type (EN + 繁體 + 简体 first-class) ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "PingFang TC", "PingFang SC", "Noto Sans TC", "Noto Sans SC",
               "Noto Sans", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  /* 5-step scale, research-tuned (GOV.UK/NHS): body never below 16px; meta raised 12→13, 14→15 */
  --fs-xs: 13px; --fs-sm: 15px; --fs-base: 16px; --fs-lg: 20px; --fs-xl: 26px;
  --lh: 1.6;

  /* ---- spacing & touch ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --touch-min: 44px;   /* WCAG 2.5.8 — tablet & mobile first */

  /* ---- motion (calm & purposeful — see the Motion contract in the jcsen-uiux skill) ----
     Custom ease-out (stronger than the CSS built-in) so feedback reads as intentional, not weak.
     Durations stay short: this audience is stressed, and every animation is disabled wholesale
     under prefers-reduced-motion (base.css). Motion here is FEEDBACK & COMPREHENSION only —
     never decoration on a high-frequency action. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);    /* enter / exit / press — feels responsive */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* something already on-screen moving A→B */
  --dur-press: 140ms;   /* button / card press feedback */
  --dur-fast:  180ms;   /* hover, colour change, small popovers */
  --dur-base:  240ms;   /* dropdowns, cards, toasts */
  --dur-panel: 320ms;   /* notices, chart grow-in (occasional, comprehension-aiding) */
}

/* Dark mode — ONLY by the user's explicit toggle; kept warm (coffee, not navy). */
:root[data-theme="dark"] {
  --bg: #1b1815; --surface: #242019; --raise: #2b261f; --line: #3a342a;
  --ink: #ece7dd; --muted: #b0a996; --faint: #9a927e;   /* AA on dark panels (was #857d6c, failed) */
  --primary: #7fa8dd; --primary-soft: #24304a; --primary-ink: #b9d0ee;
  --success: #7ab894; --success-soft: #24342b; --success-ink: #7ab894;   /* 5.69:1 on dark soft */
  --attention: #d9a75c; --attention-soft: #3a2f1c; --attention-ink: #d9a75c;  /* 6.01:1 on dark soft */
  --danger: #d98474;
  --btn-fg: #1b1815;   /* dark text on the lighter dark-theme fills — 7.2–8.1:1 (AA) */
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.4);
}

/* ---- site chrome tokens (SITE-CHROME.md): breakpoints the chrome and the tests share ---- */
:root {
  --bp-phone-lg: 430px; --bp-tablet: 760px; --bp-tablet-ls: 1024px; --bp-desktop: 1280px; --bp-wide: 1600px;
  --header-h: 60px; --header-h-phone: 56px; --footer-bg: var(--raise);
  color-scheme: light;   /* Chrome Auto-Dark / Samsung force-dark must not repaint the light default */
}
:root[data-theme="dark"] { color-scheme: dark; }
/* per-language CJK faces first (Han unification: HK glyph forms on Android / mainland ROMs) */
html[lang="zh-Hant"] { --font-sans: -apple-system, BlinkMacSystemFont, "PingFang HK", "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", "Segoe UI", Roboto, sans-serif; }
html[lang="zh-Hans"] { --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Segoe UI", Roboto, sans-serif; }