/* ============================================================================
   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: 460px; --bp-tablet: 760px; --bp-tablet-ls: 1024px; --bp-desktop: 1280px; --bp-wide: 1400px;
  --header-h: 69px; --header-h-phone: 61px;   /* measured: 12+44+12+1 · 8+44+8+1 (device-contract.json header_px) */ --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", "MingLiU_HKSCS-ExtB", "Segoe UI", Roboto, sans-serif; }   /* MingLiU_HKSCS-ExtB ships in every Windows 10/11 image (HKSCS glyphs); PMingLiU/MingLiU_HKSCS are a Feature-on-Demand an EN-imaged PC lacks */
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; }

/* ============================================================================
   KIDS JOURNEY (M18 · 小島護照 Island Passport) — the child surface's tokens.
   Scoped to html[data-kid]: only student/_kid_layout.html sets that attribute, so no adult
   screen changes. Source: work/B/bible.md (colour, line, radius, shadow, type) and
   work/B/responsive/LAYOUT.md §1–§3 (size classes, spacing, type per class), BUILD-PLAN §5.2.
   - The kid page is always light (data-theme="light" on the kid <html>); no dark block here.
   - The contract breakpoints are NOT restated here (the platform block above owns them);
     the kid strip is 72 px at every width and is not the adult header, so it has its own token.
   - @media: only the LAYOUT §1 expressions (tests/test_kids_css.py lints this block).
   - Colours for kid CSS come only from here (MODULE_CONTROL Rule 7), including quiet mode's
     softened art fills (app.css maps each bright fill in the kit art to one of the --q-* below).
   ========================================================================== */
html[data-kid] {
  --cls: phone;                  /* the width class (LAYOUT §1); each @media layer below renames it */
  --kid-strip-h: 72px;           /* the strip: avatar, name, read to me, quiet (LAYOUT §2.2) */

  /* ---- colour: the child surface (bible §1.1) ---- */
  --ground: #fbf6ec;
  --surface: #ffffff;
  --on-primary: #ffffff;         /* text and ticks on the blue button, the badge and the cue disc */
  --ink: #2b2a33;
  --muted: #5c5866;
  --primary: #1f5fbf;
  --primary-press: #174a96;
  --primary-soft: #e3edfb;
  --secondary: #0d7a6e;          /* teal: "being read" */
  --success: #1b6e46;
  --attention: #8a5a12;
  --sea: #d6ecfa;
  --seamark: #a9d1f0;
  /* bright fills (art, icons, chips; always inside an ink edge; ink text only) */
  --coral: #ff7a59;
  --teal: #1fb5a3;
  --sky: #4aa8ff;
  --lilac: #c4b5ff;
  --sunflower: #ffc83d;
  --butter: #ffe9a8;
  --mint: #c9f0ea;
  /* quiet mode: every bright mixed 40 % into the paper (bible §1.2, castkit_b.QUIET) */
  --q-coral: #fdc4b1;   --q-coral-d: #f6b29c;
  --q-teal: #a3dccf;    --q-teal-d: #8fd0c1;
  --q-sky: #b4d7f4;     --q-sky-d: #9fc8ec;
  --q-lilac: #e5dcf4;   --q-lilac-d: #d9ccf0;
  --q-sunflower: #fde4a6;
  --q-butter: #fef3cf;
  --q-mint: #e3f5f1;
  --q-leaf: #b3dfbd;    --q-leaf-d: #a3d3ae;   --q-grass: #cdebc5;
  --q-blush: #f9b3c2;   --q-peach: #fdd5bd;    --q-tan: #f6d2b0;

  /* ---- line, radius, shadow (bible §3.2–3.4) ---- */
  --line: 2.5px;
  --bd: 2.5px solid #2b2a33;
  --bd-s: 2px solid #2b2a33;
  --r: 14px;
  --r-pill: 999px;
  --r-bubble: 16px;
  --r-well: 10px;
  --sh: 0 4px 0 #2b2a33;         /* buttons, tappable cards */
  --sh-s: 0 3px 0 #2b2a33;       /* small pressables: strip pills, tiles, listen, back */
  --sh-press: 0 1px 0 #2b2a33;   /* pressed: sinks 3 px */
  --ring: 3px solid #1f5fbf;     /* selected (with a check), offset 2 */

  /* ---- faces (bible §2). The display and body faces are the subset woff2 files in /ui/kids/fonts/,
     cut to the fixed kid t() strings (tools/kids_fonts.py). Names, a teacher's child line and event text
     are DATA and use --f-data, the platform's per-language system stack (KD-24). ---- */
  --f-disp: 'Baloo 2', 'Chiron Hei HK', 'Chiron GoRound TC', sans-serif;
  --f-body: 'Nunito', 'Chiron Hei HK', sans-serif;
  --f-data: var(--font-sans);

  /* ---- type (LAYOUT §3): size / line-height; phone first ---- */
  --fs-h1: 30px;       --lh-h1: 36px;
  --fs-h1-ev: 24px;    --lh-h1-ev: 30px;
  --fs-headline: 28px; --lh-headline: 36px;
  --fs-h2: 22px;       --lh-h2: 28px;
  --fs-card: 20px;     --lh-card: 26px;
  --fs-btn: 20px;
  --fs-name: 20px;
  --fs-label: 18px;
  --fs-body: 18px;     --lh-body: 1.4;
  --fs-cap: 16px;

  /* ---- spacing per class (LAYOUT §2.4); phone first ---- */
  --m: 16px;           /* page margin */
  --gut: 12px;         /* column gutter */
  --stack: 12px;       /* gap between stacked cards */
  --sect: 20px;        /* gap between sections */
  --pad: 12px;         /* card padding */
  --top-pad: 24px;     /* the calm top above the strip */
  --main-pt: 0px;
  --main-pb: calc(88px + 24px + env(safe-area-inset-bottom, 0px));
  --top-pad-s: max(var(--top-pad), env(safe-area-inset-top, 0px));
  /* phone: the 560 cap is padding, so main's content box IS the content width. % = the sheet's width. */
  --pad-l: max(16px, env(safe-area-inset-left, 0px), calc((100% - 560px) / 2));
  --pad-r: max(16px, env(safe-area-inset-right, 0px), calc((100% - 560px) / 2));
  --rail-w: calc(112px + env(safe-area-inset-left, 0px));
  --tabbar-h: 88px;
  --band-h: 252px;     /* per screen in s-<id>.css on body[data-screen]; kid.js may set --band-h-js */
}
/* 简体: Chiron Hei HK draws Hong Kong glyph forms and lacks simplified-only glyphs, so a 简 page takes the
   system SC faces for Chinese (b_kit.py DISP_HANS); the Latin faces stay. */
html[data-kid][lang="zh-Hans"] {
  --f-disp: 'Baloo 2', "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --f-body: 'Nunito', "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
}
/* tablet (761–1023): the kid rail */
@media (min-width: 761px) {
  html[data-kid] {
    --cls: tablet;
    --fs-h1: 32px;       --lh-h1: 40px;
    --fs-h1-ev: 28px;    --lh-h1-ev: 34px;
    --fs-headline: 32px; --lh-headline: 40px;
    --fs-h2: 24px;       --lh-h2: 30px;
    --fs-card: 22px;     --lh-card: 28px;
    --lh-body: 1.45;
    --m: 24px;
    --gut: 16px;
    --stack: 16px;
    --sect: 24px;
    --pad: 14px;
    --top-pad: 16px;
    --main-pt: 8px;
    --main-pb: calc(32px + env(safe-area-inset-bottom, 0px));
    --pad-l: var(--m);
    --pad-r: max(var(--m), env(safe-area-inset-right, 0px));
  }
}
/* tablet landscape and the school laptop (1024–1279) */
@media (min-width: 1024px) {
  html[data-kid] {
    --cls: tablet_ls;
    --m: 32px;
    --gut: 20px;
    --pad: 16px;
  }
}
/* desktop (1280–1399): content capped at 1104, centred in the column */
@media (min-width: 1280px) {
  html[data-kid] {
    --cls: desktop;
    --m: 40px;
    --gut: 24px;
    --stack: 20px;
    --sect: 32px;
    --main-pb: calc(40px + env(safe-area-inset-bottom, 0px));
    --pad-l: max(var(--m), calc((100% - 1104px) / 2));
    --pad-r: max(var(--m), calc((100% - 1104px) / 2));
  }
}
/* wide (>= 1400): the sheet on the sea (2.5 + 112 + 48 + 1104 + 48 + 2.5 = 1317) */
@media (min-width: 1400px) {
  html[data-kid] {
    --cls: wide;
    --m: 48px;
  }
}
/* short: rail and <= 560 tall (the 1093 x 490 school laptop). Size trims only, never a layout change. */
@media (min-width: 761px) and (max-height: 560px) {
  html[data-kid] {
    --fs-h1: 28px;       --lh-h1: 34px;
    --fs-h1-ev: 24px;    --lh-h1-ev: 30px;
    --fs-headline: 28px; --lh-headline: 36px;
    --fs-h2: 22px;       --lh-h2: 28px;
    --fs-card: 20px;     --lh-card: 26px;
    --lh-body: 1.4;
    --top-pad: 8px;
    --main-pt: 4px;
  }
}
/* quiet mode (bible §1.2): brights soften 40 % into the paper; no shadows. Buttons keep their colour. */
html[data-kid].is-quiet {
  --coral: var(--q-coral);
  --teal: var(--q-teal);
  --sky: var(--q-sky);
  --lilac: var(--q-lilac);
  --sunflower: var(--q-sunflower);
  --butter: var(--q-butter);
  --mint: var(--q-mint);
  --sh: none;
  --sh-s: none;
  --sh-press: none;
}