/* ==========================================================================
   CaNaMED design tokens — single source of truth ("Clinical Editorial")
   Loaded BEFORE every page stylesheet (index, privacy, verify, healthcheck,
   scenario-author, docs pages). After this file ships, no stylesheet writes
   a raw hex or px value: everything references a token defined here.
   Light theme in :root; dark theme overrides at the bottom mirror the
   existing 3-way theme contract (data-theme dark/light/auto + media query).
   All colour pairs below are WCAG-AA verified (see brief §Contrast).
   ========================================================================== */
:root {
  /* ------------------------------------------------------------------
     1. BRAND RAMPS (unchanged values — already AA-audited in production)
     ------------------------------------------------------------------ */
  --nagoya-700: #0c3f6e;
  --nagoya-600: #1763a6;
  --nagoya-500: #2e9fdf;
  --nagoya-50:  #e9f4fb;

  --caen-500:   #e08a1e;   /* decorative only (dots, art) */
  --caen-ink:   #7a5d12;   /* amber as TEXT — AA on white */
  --caen-line:  #b45309;   /* amber as border/strong accent — AA */
  --caen-50:    #fbf3df;

  --meeting:    #4f7d8c;   /* the FR×JP blend — everything shared */
  --meeting-50: #eaf1f3;

  /* warm neutral ramp */
  --n-0:   #ffffff;
  --n-25:  #fbf9f4;
  --n-50:  #f1eee6;
  --n-100: #e6e2d8;
  --n-200: #d4cfc2;
  --n-300: #b3ab99;
  --n-500: #4d5b6a;
  --n-700: #38434f;
  --n-900: #16202b;

  /* ------------------------------------------------------------------
     2. SEMANTIC COLOUR (what components actually reference)
     ------------------------------------------------------------------ */
  --bg: #f6f4ef;
  --card: var(--n-0);
  --surface-sunk: #f3f0e8;
  --line: var(--n-100);
  --line-strong: var(--n-200);
  --ink: var(--n-900);
  --muted: var(--n-500);
  --primary: var(--nagoya-600);
  --primary-hover: var(--nagoya-700);
  --on-primary: #ffffff;     /* NEW — text/icon on --primary fills.
                                Flips to dark ink in dark theme, fixing the
                                white-on-cyan 2.2:1 button failure. */
  --key: #c0392b;
  --key-50: #fdecea;
  --ok: #1e8449;
  --ok-strong: #176b3a;
  --ok-50: #e7f4ec;
  --focus: #11161b;

  /* consultation-note "paper chart" surface (themed) */
  --note-bg:    #fbf9f3;
  --note-line:  #d8cdb4;
  --note-stripe: rgba(206, 184, 138, 0.18);
  --note-margin-line: rgba(220, 120, 90, 0.30);
  --note-ink:   var(--ink);
  --note-accent-ink: #5a3b14;

  /* ------------------------------------------------------------------
     3. TYPOGRAPHY (NEW — the layer that did not exist)
     Faces: Source Serif 4 (headings/display voice) + Source Sans 3
     (body/UI), both variable WOFF2, self-hosted (CSP: no font CDN).
     CJK stack is SCOPED to the dictionary popover component only.
     ------------------------------------------------------------------ */
  --font-sans:  "Source Sans 3", system-ui, -apple-system, "Segoe UI",
                Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", "Iowan Old Style", Georgia,
                "Times New Roman", serif;
  --font-mono:  ui-monospace, "JetBrains Mono", Consolas,
                "SFMono-Regular", monospace;
  /* Latin face first so FR/EN glyphs match the UI; JP glyphs fall through
     to high-quality system JP fonts (Hiragino/Yu Gothic on Apple+Windows,
     Noto Sans JP on Android/Linux). Zero download cost. */
  --font-cjk:   "Source Sans 3", "Hiragino Kaku Gothic ProN", "Yu Gothic UI",
                YuGothic, Meiryo, "Noto Sans JP", "Noto Sans CJK JP",
                system-ui, sans-serif;

  /* type scale — 1.2 (minor third), anchored at 1rem body */
  --fs-0: 0.75rem;   /* 12px — meta/folio ONLY, never body copy */
  --fs-1: 0.85rem;   /* 13.6px — small labels, hints, chips */
  --fs-2: 1rem;      /* 16px — body floor (unchanged contract) */
  --fs-3: 1.2rem;    /* 19.2px — lead paragraph, h4 */
  --fs-4: 1.44rem;   /* 23px — h3 / card titles */
  --fs-5: 1.73rem;   /* 27.7px — h2 / stage titles */
  --fs-6: 2.07rem;   /* 33px — h1 / view titles */
  --fs-7: 2.49rem;   /* 40px — display (splash wordmark tier) */

  --lh-tight: 1.2;   /* display + h1/h2 */
  --lh-snug:  1.35;  /* h3/h4, buttons, chips */
  --lh-body:  1.6;   /* running text */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-caps: 0.06em; /* letterspaced small-caps kickers/labels (editorial) */

  /* ------------------------------------------------------------------
     4. SPACE / RADIUS / DEPTH / LAYER
     ------------------------------------------------------------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --s-8: 64px; --s-9: 96px;             /* NEW — section-level rhythm */

  /* radii — tightened one step toward editorial (was 9/13/18/24) */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
  /* ACTION buttons are pill-shaped (2026-07-17 owner request: "more modern");
     wide option-rows (workup/quiz choices) stay on --r-md so options and
     actions read as different affordances. One token so the shape is a
     single decision. */
  --r-btn: var(--r-pill);

  /* depth: hairline rules first, shadow second. sm = resting cards,
     md = raised/interactive, lg = RESERVED for modals & popovers. */
  --sh-sm: 0 1px 2px rgba(12,63,110,.06), 0 2px 5px rgba(12,63,110,.05);
  --sh-md: 0 2px 4px rgba(12,63,110,.06), 0 8px 20px rgba(12,63,110,.09);
  --sh-lg: 0 4px 10px rgba(12,63,110,.07), 0 22px 48px rgba(12,63,110,.15);

  /* z-index scale (NEW — replaces scattered literals) */
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-toast: 1100;
  --z-skip: 9999;

  /* ------------------------------------------------------------------
     5. MOTION (unchanged — already restrained and meaningful)
     ------------------------------------------------------------------ */
  --dur-micro: 90ms;
  --dur-fast:  160ms;
  --dur-base:  260ms;
  --dur-view:  380ms;
  --dur-event: 1100ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* earned moments only */

  /* per-stage accent (set live on #room-main[data-stage]) */
  --stage-accent: var(--nagoya-600);
  --stage-accent-50: var(--nagoya-50);

  /* masthead (global header): pinned to the deep-navy pair in EVERY theme —
     deliberately NOT theme-remapped. Before this token existed the header
     painted with var(--nagoya-700), which dark mode brightens for text use,
     turning the masthead into a loud light-blue band on an ink-dark page.
     A constant deep masthead + the tricolour underline is the editorial
     treatment; white ink on it is ~10:1 in both themes. */
  --masthead-a: #0c3f6e;
  --masthead-b: #08243f;
  --masthead-ink: #ffffff;
}

/* ==========================================================================
   DARK THEME — same overrides as production today, plus --on-primary flip.
   Applied twice per the existing contract: forced [data-theme="dark"] and
   the auto media query.
   ========================================================================== */
html[data-theme="dark"] {
  --bg: #0e1620;
  --surface-sunk: #0a1119;
  --card: #16202b;
  --line: #243245;
  --line-strong: #324760;
  --ink: #f1eee6;
  --muted: #b3ab99;
  --n-25:  #131c26;
  --n-50:  #18222e;
  --n-100: #1d2937;
  --note-bg:    #161e2a;
  --note-line:  #2c3a52;
  --note-stripe: rgba(206, 184, 138, 0.06);
  --note-margin-line: rgba(220, 120, 90, 0.40);
  --note-ink:   var(--ink);
  --note-accent-ink: #e2b86b;
  --nagoya-700: #1e6fb6;
  --nagoya-600: #2e9fdf;
  --nagoya-500: #5cb8e8;
  --nagoya-50:  #102a3f;
  --caen-500:   #f0a040;
  --caen-ink:   #d5a55c;
  --caen-line:  #ef9a3a;
  --caen-50:    #2a2114;
  --meeting:    #74a2b3;
  --meeting-50: #1a2830;
  --primary: var(--nagoya-500);
  --primary-hover: var(--nagoya-500);
  --on-primary: #0e1620;   /* dark ink on the light-blue fill — 8.2:1 */
  --key: #ff6b5a;
  --key-50: #2a1612;
  --ok: #4ec57f;
  --ok-50: #102a1d;
  --ok-strong: #7be0a4;
  --focus: #f6d973;
  --sh-sm: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.20);
  --sh-md: 0 2px 4px rgba(0,0,0,.32), 0 10px 26px rgba(0,0,0,.30);
  --sh-lg: 0 4px 10px rgba(0,0,0,.36), 0 26px 60px rgba(0,0,0,.42);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="high-contrast"]) {
    --bg: #0e1620;
    --surface-sunk: #0a1119;
    --card: #16202b;
    --line: #243245;
    --line-strong: #324760;
    --ink: #f1eee6;
    --muted: #b3ab99;
    --n-25:  #131c26;
    --n-50:  #18222e;
    --n-100: #1d2937;
    --note-bg:    #161e2a;
    --note-line:  #2c3a52;
    --note-stripe: rgba(206, 184, 138, 0.06);
    --note-margin-line: rgba(220, 120, 90, 0.40);
    --note-ink:   var(--ink);
    --note-accent-ink: #e2b86b;
    --nagoya-700: #1e6fb6;
    --nagoya-600: #2e9fdf;
    --nagoya-500: #5cb8e8;
    --nagoya-50:  #102a3f;
    --caen-500:   #f0a040;
    --caen-ink:   #d5a55c;
    --caen-line:  #ef9a3a;
    --caen-50:    #2a2114;
    --meeting:    #74a2b3;
    --meeting-50: #1a2830;
    --primary: var(--nagoya-500);
    --primary-hover: var(--nagoya-500);
    --on-primary: #0e1620;
    --key: #ff6b5a;
    --key-50: #2a1612;
    --ok: #4ec57f;
    --ok-50: #102a1d;
    --ok-strong: #7be0a4;
    --focus: #f6d973;
    --sh-sm: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.20);
    --sh-md: 0 2px 4px rgba(0,0,0,.32), 0 10px 26px rgba(0,0,0,.30);
    --sh-lg: 0 4px 10px rgba(0,0,0,.36), 0 26px 60px rgba(0,0,0,.42);
  }
}

/* prefers-contrast hardening. The :root values are light-tuned and lose to
   the dark selectors' specificity, so dark palettes get their own LIGHTER
   hardening values (brighter lines/muted on the ink-dark surfaces). */
@media (prefers-contrast: more) {
  :root {
    --line: #8a93a0;
    --line-strong: #6b7682;
    --muted: #3d4651;
  }
  html[data-theme="dark"] {
    --line: #566c88;
    --line-strong: #7189a3;
    --muted: #c6bfb0;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="high-contrast"]) {
    --line: #566c88;
    --line-strong: #7189a3;
    --muted: #c6bfb0;
  }
}

/* ==========================================================================
   SELF-HOSTED FONT FACES (CSP: default-src 'self' — no CDN possible).
   Variable WOFF2 files vendored under fonts/ (Fontsource dist of the Adobe
   originals, SIL OFL — see fonts/LICENSE-OFL.txt), added to sw.js precache.
   unicode-range splits latin / latin-ext so most sessions download only the
   two ~30-50 KB latin files; œ/Œ and other extended glyphs pull latin-ext
   on demand. font-display: swap → system fallback paints first, no FOIT.
   ========================================================================== */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("fonts/source-serif-4-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}