/* ==========================================================================
   SCMH concept demonstration — tokens.css
   The token layer. Nothing here draws anything; it only names values.

   Sources: brand document §3.2 (ramps), §3.3 (semantic tokens), §3.5 (space,
   radius, elevation), §4.3 (dark), §6.2/§6.3 (severity), and plan §4.2/§4.4.
   Every value is copied from those documents. Values ADDED here (rather than
   copied) are marked ADDED and are listed in /starr/CONVENTIONS.md.

   Contrast figures in comments are WCAG 2.x relative-luminance ratios computed
   with tools/contrast.cjs, not estimated.
   ========================================================================== */

/* ------------------------------------------------------------------ 1. type
   Self-hosted, subset, no network. font-src 'self' permits nothing else.
   D11: webfonts are an enhancement. If a file is missing the metric-matched
   fallback carries the same layout, so nothing reflows and nothing breaks. */
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces.woff2") format("woff2");
  font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("fonts/publicsans.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("fonts/publicsans-italic.woff2") format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/ibmplexmono.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
/* Metric-matched fallbacks (house values), so nothing moves when the webfonts
   land and nothing collapses if they never do. */
@font-face{font-family:"Fraunces Fallback";src:local("Georgia"),local("Times New Roman"),local("Liberation Serif");
  ascent-override:84.71%;descent-override:22.09%;line-gap-override:0%;size-adjust:115.45%}
@font-face{font-family:"PS Fallback";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");
  ascent-override:90.59%;descent-override:21.46%;line-gap-override:0%;size-adjust:104.87%}

/* -------------------------------------------------------- 2. light tokens */
:root{
  /* grounds — house values kept unchanged, deliberately (brand §3.3) */
  --cream:  #FAF7F1;   --band: #F2ECE0;   --paper: #FFFFFF;
  --ink:    #1B1A18;   --ink-2: #56534D;
  --line:   #E3DBCB;   --line-2: #CDC2AD;

  /* re-anchored to SCMH (brand §3.3) */
  --brand:    #023A72;  /* star blue deepened one step — headings, ring role  10.61:1 on cream */
  --brand-2:  #002858;  /* the logo's own deep navy, sampled from the star   14.54:1 white */
  --brand-3:  #105098;  /* the logo's dominant blue, sampled from mark.png    7.49:1 on cream */
  --accent:   #AE0000;  /* wordmark red deepened to text weight              7.01:1 on cream */
  --accent-raw:#D00000; /* the measured wordmark red — display and non-text only */
  --accent-soft:#FDECEC;
  /* ---- categorical chart series. Validated, not eyeballed:
     light  worst adjacent CVD ΔE 11.4 (protan) · normal-vision 20.7 · all ≥3:1 on white
     Slot 1 is the logo's own blue. Assigned in fixed order, never cycled; a 6th
     series folds into "Other" rather than inventing a hue. Status colours
     (--accent, --gold) are reserved and are never used as a series. */
  --c1: #105098;  --c2: #B8860B;  --c3: #0E7C5A;  --c4: #7A3FA8;  --c5: #B0431A;
  --grid: #E7E2D8;  --axis: #56534D;
  --gold:     #684B0F;  /* text-weight gold                                  7.55:1 on cream */
  --gold-mark:#D0A030;  /* the caduceus gold, sampled — 2.24:1, non-text only */
  --red:      #AE0000;
  --link:     #1A56A0;  /* 6.81:1 on cream */
  --focus:    #12448F;  /* 8.73 cream / 9.34 paper / 7.94 band */

  --display: "Fraunces","Fraunces Fallback",Georgia,serif;
  --sans:    "Public Sans","PS Fallback",Arial,sans-serif;
  --mono:    "IBM Plex Mono",ui-monospace,"DejaVu Sans Mono",monospace;
  --r:10px; --r-lg:16px; --r-pill:999px; --r-sm:6px;   /* four radii, no fifth */
  --measure:38rem;
  --shadow: 0 1px 2px rgba(2,31,61,.05), 0 8px 24px -16px rgba(2,31,61,.20);

  /* plan §4.2 additions */
  --app-band: #F3F6FA;      /* slate-50 — clinical chrome, rails, toolbars */
  --focus-ring: #12448F;    /* default; context-switched, see base.css §focus */

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --gap: clamp(1.25rem,3vw,2rem);
  --pad: clamp(1rem,4vw,2rem);

  --e0: none;                                                    /* the default */
  --e1: 0 1px 2px rgba(2,31,61,.05), 0 8px 24px -16px rgba(2,31,61,.20);
  --e2: 0 8px 16px -8px rgba(2,31,61,.24), 0 24px 48px -24px rgba(2,31,61,.28);

  /* severity — light (brand §6.2 / plan §4.2) */
  --s0-fill:#FFFFFF; --s0-ink:#16222D;
  --s1-fill:#FBEFD0; --s1-ink:#4C360B; --s1-bd:#B98F1F; --s1-bar:#A67C1C;
  --s2-fill:#EFD285; --s2-ink:#332406; --s2-bar:#866214;
  --s3-fill:#F5AAAA; --s3-ink:#48050A; --s3-bar:#AE0000;
  --s4-fill:#AE0000; --s4-ink:#FFFFFF; --s4-bar:#690409;
  --s5-fill:#E7ECF3; --s5-ink:#334252; --s5-bar:#8291A3;

  --row-hover:#EDF2FA; --row-sel:#DCE7F6; --row-sel-bar:#024C96;
  --ink-disabled:#6B7B8E;   /* 4.33:1 — below the floor, deliberately (brand §6.5) */
  --line-mean:#8291A3;      /* meaningful boundary on white, 3.22:1 */
  --line-mean-cream:#A28D66;/* meaningful boundary on cream, 3.00:1 */

  /* ADDED — draft component ground (plan §6.1 item 1) */
  --draft-fill:#FDF8EC;

  /* ADDED — public-shell grounds, so the public shell can carry a coherent
     dark mode without re-mapping --paper out from under the clinical shell.
     Light values are identical to --cream / --band / --paper. */
  --pub-ground:#FAF7F1;   /* the page */
  --pub-band:#F2ECE0;     /* alternating band */
  --pub-card:#FFFFFF;     /* cards, panels */
  --pub-accent:#AE0000;   /* eyebrows, the h1's second line */
  --pub-line:#E3DBCB;     /* decorative hairline, 1.29:1 — separators only */
  --pub-line-2:#CDC2AD;   /* decorative, 1.65:1 */
}

/* --------------------------------------------------------- 3. dark tokens
   Re-derived, not inverted (brand §4.3, §6.3). Ground is #0B1420 rather than
   #000000 because pure black behind near-white text blooms; ink is #DCE5F0
   rather than #FFFFFF because 21:1 at 3am is a glare source. */
:root[data-theme="dark"], :root[data-theme="night"]{
  --surface-0:#0B1420; --surface-1:#131F2E; --surface-2:#1C2A3B;
  --ink:#DCE5F0;       /* 14.54:1 on surface-0 */
  --ink-2:#9DB0C6;     /*  8.33:1 on surface-0 */
  --line:#33455B;      /* decorative, 1.70:1 */
  --line-3:#526B83;    /* meaningful boundary, 3.00:1 on surface-1 */
  --line-mean:#526B83;
  --link:#7FA5DB;      /*  7.32:1 on surface-0 */
  --brand-3:#A9C6EA;   /* 10.53:1 — the brand blue re-derived for dark */
  --focus-ring:#FFC94A;/* 12.07 / 10.85 / 9.49:1 on surfaces 0/1/2 */
  --paper:var(--surface-1); --app-band:var(--surface-2);

  --s0-fill:#131F2E; --s0-ink:#DCE5F0;
  --s1-fill:#3A2D0E; --s1-ink:#F2DFA6; --s1-bar:#C6972A; --s1-bd:#C6972A;
  --s2-fill:#4D3B0D; --s2-ink:#F7E8BE; --s2-bar:#E1B84D;
  --s3-fill:#A01E25; --s3-ink:#FBD5D5; --s3-bar:#EE7676;
  --s4-fill:#E23434; --s4-ink:#1A0202; --s4-bar:#FBD5D5;
  --s5-fill:#1C2A3B; --s5-ink:#9DB0C6; --s5-bar:#4A6076;
  --row-hover:#1A2838; --row-sel:#22354B; --row-sel-bar:#7FA5DB;
  --ink-disabled:#6E8093;   /* 4.09:1 — below the floor, deliberately */

  /* ADDED — dark values for tokens the brand document only gave in light.
     Each was computed, not inverted. */
  --brand:#A9C6EA;          /* heading blue, 10.53:1 on surface-0 */
  --brand-2:#06101A;        /* the navy bands go darker than the page, not lighter */
  --cream:#0B1420; --band:#131F2E;
  --gold:#E1B84D;           /* text-weight gold for dark: 9.84 / 8.84 / 7.73:1 */
  /* dark series re-stepped from the same hues, not flipped:
     worst adjacent CVD ΔE 9.4 (protan) · normal-vision 17.3 · all ≥3:1 on #131F2E */
  --c1:#3F8AD4;  --c2:#B58A22;  --c3:#149574;  --c4:#9668C9;  --c5:#D96A3A;
  --grid:#22304a;  --axis:#9DB0C6;
  --accent:#EE7676;         /* red-300: 6.60 / 5.93 / 5.19:1 on surfaces 0/1/2 */
  --accent-raw:#EE7676;
  --accent-soft:#2A1414;    /* ink 13.66:1 on it */
  --red:#EE7676;
  --line-2:#33455B;
  --line-mean-cream:#526B83;
  --line-mean-2:#5C7791;    /* 3.12 / 3.97 / 3.56:1 on surfaces 2/0/1 — the only
                               meaningful-boundary value that clears 3:1 against
                               surface-2 as well. --line-mean (#526B83) is 2.62:1
                               there, so it cannot be the single boundary token. */
  --draft-fill:#241C0A;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -16px rgba(0,0,0,.9);
  --e1: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -16px rgba(0,0,0,.9);
  --e2: 0 8px 16px -8px rgba(0,0,0,.6), 0 24px 48px -24px rgba(0,0,0,.8);

  --pub-ground:#0B1420; --pub-band:#131F2E; --pub-card:#1C2A3B;
  --pub-accent:#EE7676; --pub-line:#33455B; --pub-line-2:#3F5470;
}

/* Night shift — a sub-mode of dark, not a fourth palette. Ink is capped, the
   link loses its short-wavelength weight, and every non-status chroma is
   dropped by roughly a third. Pre-computed hex, never a filter: a filter would
   desaturate the severity scale too and destroy the encoding. */
:root[data-theme="night"]{
  --ink:#C9D2DC;            /* 12.10:1 on surface-0 */
  --link:#A9C6EA;           /* 10.53:1 */
  --brand-3:#A9C6EA; --brand:#A9C6EA;
  --accent:#DA8B8B;         /* #EE7676 at two thirds of its saturation: 7.09 / 6.37 / 5.57:1 */
  --accent-raw:#DA8B8B; --red:#DA8B8B; --pub-accent:#DA8B8B;
  --gold:#DCC189;           /* 10.71:1 on surface-0 */
  --focus-ring:#FFC94A;     /* not desaturated: it is the accessibility affordance */
}

/* data-theme="auto" follows the device. app.js replaces it only on an explicit
   choice, so a theme never changes underneath a reader mid-page. */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    /* same series steps as the explicit dark theme — see that block for
       the measured CVD numbers. Kept in sync deliberately. */
    --c1:#3F8AD4;  --c2:#B58A22;  --c3:#149574;  --c4:#9668C9;  --c5:#D96A3A;
    --grid:#22304a;  --axis:#9DB0C6;
    --surface-0:#0B1420; --surface-1:#131F2E; --surface-2:#1C2A3B;
    --ink:#DCE5F0; --ink-2:#9DB0C6;
    --line:#33455B; --line-3:#526B83; --line-mean:#526B83;
    --link:#7FA5DB; --brand-3:#A9C6EA; --focus-ring:#FFC94A;
    --paper:var(--surface-1); --app-band:var(--surface-2);
    --s0-fill:#131F2E; --s0-ink:#DCE5F0;
    --s1-fill:#3A2D0E; --s1-ink:#F2DFA6; --s1-bar:#C6972A; --s1-bd:#C6972A;
    --s2-fill:#4D3B0D; --s2-ink:#F7E8BE; --s2-bar:#E1B84D;
    --s3-fill:#A01E25; --s3-ink:#FBD5D5; --s3-bar:#EE7676;
    --s4-fill:#E23434; --s4-ink:#1A0202; --s4-bar:#FBD5D5;
    --s5-fill:#1C2A3B; --s5-ink:#9DB0C6; --s5-bar:#4A6076;
    --row-hover:#1A2838; --row-sel:#22354B; --row-sel-bar:#7FA5DB;
    --ink-disabled:#6E8093;
    --brand:#A9C6EA; --brand-2:#06101A; --cream:#0B1420; --band:#131F2E;
    --gold:#E1B84D; --accent:#EE7676; --accent-raw:#EE7676; --accent-soft:#2A1414;
    --red:#EE7676; --line-2:#33455B; --line-mean-cream:#526B83; --line-mean-2:#5C7791;
    --draft-fill:#241C0A;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -16px rgba(0,0,0,.9);
    --e1: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -16px rgba(0,0,0,.9);
    --e2: 0 8px 16px -8px rgba(0,0,0,.6), 0 24px 48px -24px rgba(0,0,0,.8);
    --pub-ground:#0B1420; --pub-band:#131F2E; --pub-card:#1C2A3B;
    --pub-accent:#EE7676; --pub-line:#33455B; --pub-line-2:#3F5470;
  }
}

/* ------------------------------------------------- 4. density and text size */
:root[data-density="compact"]     { --row-h:32px; --cell-pad:4px 8px;   --body:0.875rem; }
:root[data-density="default"]     { --row-h:40px; --cell-pad:8px 12px;  --body:0.9375rem; }
:root[data-density="comfortable"] { --row-h:48px; --cell-pad:12px 16px; --body:1rem; }

:root[data-scale="1"]    { font-size:100%; }
:root[data-scale="1.15"] { font-size:115%; }
:root[data-scale="1.32"] { font-size:132%; }

/* ------------------------------------------------------------ 5. contrast
   The house ships prefers-contrast:more; this extends it, and exposes the same
   thing as a control because a preference the operating system cannot express
   is not available to the nurse who needs it. */
@media (prefers-contrast: more){
  :root:not([data-contrast="normal"]){
    --ink:#000; --ink-2:#26241F; --line:#8C8477; --line-2:#6E6658;
    --cream:#FFF; --pub-ground:#FFF; --band:#F4F1EA; --pub-band:#F4F1EA;
    --brand:#001B38; --brand-3:#023A72; --accent:#8B0206; --pub-accent:#8B0206;
    --link:#0B3F80; --gold:#4C360B;
    --line-mean:#4A5B6E; --line-mean-cream:#6E5A31;
  }
}
:root[data-contrast="more"]{
  --ink:#000; --ink-2:#26241F; --line:#8C8477; --line-2:#6E6658;
  --cream:#FFF; --pub-ground:#FFF; --band:#F4F1EA; --pub-band:#F4F1EA;
  --brand:#001B38; --brand-3:#023A72; --accent:#8B0206; --pub-accent:#8B0206;
  --link:#0B3F80; --gold:#4C360B;
  --line-mean:#4A5B6E; --line-mean-cream:#6E5A31;
}
/* The light high-contrast block above pushes the grounds to white. In dark it
   must push them the other way instead, or ink and ground collide. Every value
   here is measured against #000000 / #0B1420 / #131F2E. */
:root[data-theme="dark"][data-contrast="more"],
:root[data-theme="night"][data-contrast="more"]{
  --surface-0:#000000; --surface-1:#0B1420; --surface-2:#131F2E;
  --cream:#000000; --band:#0B1420;
  --pub-ground:#000000; --pub-band:#0B1420; --pub-card:#131F2E;
  --paper:#0B1420; --app-band:#131F2E;
  --brand-2:#000000;
  --ink:#FFFFFF;            /* 21.00 / 18.50 / 16.63:1 on surfaces 0/1/2 */
  --ink-2:#C6D4E4;          /* 13.94 / 12.28 / 11.04:1 */
  --brand:#A9C6EA; --brand-3:#A9C6EA;
  --link:#A9C6EA;           /* 11.95 / 10.53 /  9.46:1 */
  --accent:#F5AAAA; --pub-accent:#F5AAAA; --red:#F5AAAA; --accent-raw:#F5AAAA;
  --gold:#EFD285;           /* 14.23 / 12.53 / 11.26:1 */
  --accent-soft:#1A0808; --draft-fill:#141004;
  --line:#6E8093; --line-2:#8FA6BC;
  --line-mean:#8FA6BC; --line-mean-2:#8FA6BC; --line-mean-cream:#8FA6BC;
  --pub-line:#6E8093; --pub-line-2:#8FA6BC;
  --focus-ring:#FFC94A;
}

/* ------------------------------------------------------- 6. the bilingual
   mechanism (plan §2.5). One file per screen; both languages in the source,
   adjacent; CSS hides the inactive one. With CSS off, BOTH appear, in source
   order — which is why the demonstration banner is not a CSS-only construction
   and why gate 20 can be met at all. */
[data-lang="en"] .t[lang="es"]{ display:none; }
[data-lang="es"] .t[lang="en"]{ display:none; }

/* ------------------------------------------------------------- 7. motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}
:root[data-motion="less"] *,
:root[data-motion="less"] *::before,
:root[data-motion="less"] *::after{
  animation:none !important; transition:none !important;
}