/* ============================================================
   rxdx Design System — "Ink & Paper"
   tokens.css — SINGLE SOURCE OF TRUTH for all styling.
   LOCKED tokens. Do not alter color values.
   ============================================================ */
:root {

  /* --- Color: surfaces & ink ------------------------------- */
  --bg:        #f4efe4;  /* app background (paper)            */
  --surface:   #fbf7ef;  /* card / raised surface            */
  --surface-2: #efe8da;  /* inset / secondary surface        */
  --ink:       #241c15;  /* primary text                     */
  --ink-2:     #6a5c48;  /* secondary text                   */
  --ink-3:     #a2937d;  /* tertiary / muted text            */

  /* --- Color: lines ---------------------------------------- */
  --line:   #e3d9c7;     /* hairline / divider (1px)         */
  --line-2: #d5c8b1;     /* stronger border                  */

  /* --- Color: accent (rust) -------------------------------- */
  --accent:       #c2410c; /* primary accent                 */
  --accent-press: #9a330a; /* accent pressed / active        */
  --accent-bg:    #f8e7dc; /* accent tint background         */
  --on-accent:    #fff;    /* text/icon on accent fill       */
  --hl:           #f6dd77; /* hint highlighter (marker yellow) */

  /* --- Color: semantic status ------------------------------ */
  --good:    #1f7a4d;    /* correct / success text           */
  --good-bg: #e3f2e9;    /* correct / success background     */
  --bad:     #b81d3b;    /* wrong / error text (crimson — distinct from --accent rust) */
  --bad-bg:  #f9e4e9;    /* wrong / error background (cooled to pair with the crimson) */
  --danger:  #c0392b;    /* absolute-contraindication red    */

  /* --- Color: warn / amber (the "!" clarification call-out) - */
  --warn:        #d99a1c; /* amber icon fill                  */
  --warn-bg:     #fdf4e3; /* amber note background            */
  --warn-border: #e8c974; /* amber note border                */
  --warn-ink:    #a5710f; /* amber emphasis text              */

  /* --- Color: misc surfaces -------------------------------- */
  --rail-bg: #fffdfa;    /* left icon rail (brighter than surface) */

  /* --- Elevation (shadows) + scrim ------------------------- */
  --shadow-1: 0 1px 3px rgba(60,46,24,.10);  /* sticky bars, cards        */
  --shadow-2: 0 8px 28px rgba(60,46,24,.16); /* popover / dropdown        */
  --shadow-3: 0 24px 60px rgba(38,26,20,.32);/* modal / lightbox          */
  --scrim:    rgba(40,28,12,.34);            /* drawer / sheet backdrop   */
  --scrim-strong: rgba(38,26,20,.62);        /* lightbox backdrop         */

  /* --- Typeface families ----------------------------------- */
  --display: 'Fraunces', Georgia, serif;              /* headings */
  --body:    'DM Sans', system-ui, sans-serif;        /* body     */
  --sans:    'DM Sans', system-ui, sans-serif;        /* eyebrow / uppercase section labels (readable) */
  --mono:    'IBM Plex Mono', ui-monospace, monospace;/* NUMERIC / key / id only — no longer used for labels */

  /* --- Type scale (THE ONLY sizes allowed — never a raw px font-size) --- */
  --t-hero: 64px;        /* home logo · results score (display)          */
  --t-hero-sm: 48px;     /* hero at narrow widths                        */
  --t-brand: 22px;       /* top-bar brand-mark (display)                 */
  --t-h1:   26px;
  --t-h2:   19px;
  --t-h3:   16px;
  --t-body: 15px;
  --t-meta: 13px;
  --t-tag:  12px;        /* compact rail/badge tags                      */
  --t-eye:  11px;        /* eyebrow / overline · numeric counts          */
  --t-micro: 10px;       /* tiny flags (lab hi/lo)                       */

  /* --- Spacing scale (px) ---------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;

  /* --- Radius ---------------------------------------------- */
  --r-1: 8px;            /* controls / buttons               */
  --r-2: 12px;           /* cards                            */
  --r-3: 6px;            /* pills & chips (crisp small radius) */
  --r-pill: 999px;       /* fully-round: progress bars, badges, oval facet pills */

  /* --- Control & tap sizing -------------------------------- */
  --ctl:    36px;        /* standard control height          */
  --ctl-sm: 34px;        /* compact control (top-bar pills / subtabs inside the 44px bar) */
  --tap:    44px;        /* min interactive tap target        */

  /* --- Layout ---------------------------------------------- */
  --rail:   60px;        /* collapsed left icon-rail width   */
  --drawer: 248px;       /* expanded sidebar drawer width    */

  /* --- Safe-area insets (notch / home-indicator) ----------
     The device's safe-area, tokenized so the shell reads it from ONE place. Resolves to 0 on any
     device without a notch/rounded corner (desktop, most iPads), so referencing these is free —
     it only takes effect where the hardware actually intrudes. REQUIRES viewport-fit=cover in the
     page <meta viewport> (set on every .html); without it the browser keeps these at 0. */
  --sa-top:    env(safe-area-inset-top,    0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left:   env(safe-area-inset-left,   0px);
  --sa-right:  env(safe-area-inset-right,  0px);

  /* --- Header (top bar) height ----------------------------- */
  --topbar-h: 44px;      /* desktop bar height (= --tap); phones override taller below */
}

/* ============================================================
   MOBILE type + header (<=720px). The desktop scale is tuned for a
   wide viewport; on a phone it reads too small, so bump the whole
   scale ~1 step. Redefining the tokens here keeps them the single
   source of truth and scales the WHOLE site at once.
   ============================================================ */
@media (max-width:720px){
  :root{
    --t-hero:   56px;    /* home wordmark stays commanding but fits narrow */
    --t-brand:  25px;    /* top-bar context title (was 22) */
    --t-h1:     28px;    /* was 26 */
    --t-h2:     21px;    /* was 19 */
    --t-h3:     18px;    /* was 16 */
    --t-body:   16px;    /* was 15 — closer to native ~17 */
    --t-meta:   14px;    /* was 13 */
    --t-tag:    13px;    /* was 12 */
    --t-eye:    12px;    /* was 11 — the MODE/EXAM/LENS eyebrows */
    --topbar-h: 56px;    /* taller bar so the menu button sits INSIDE it */
  }
}