/* LYNNAGEN token layer — the ONLY place a colour or a size is declared.
   Light on bare :root, dark redefined under html[data-theme="dark"].

   Two rules make this file load-bearing:

   1. Every token exists in BOTH themes. A token declared in one theme only silently
      resolves to nothing in the other, which is how `--red` ended up rendering an error
      message as body text in light mode.
   2. No component file may declare a colour literal. Components consume tokens, so a
      theme switch can never leave a component behind, and no theme-scoped component
      selector exists that could out-cascade a modifier. That is the structural fix for
      the defect where `html[data-theme="dark"] .pill` tied and beat
      `html[data-theme="dark"] .Pathogenic`, rendering all five classification tiers as
      the same grey capsule on the default theme.

   v0.9.13: the palette is the LYNNAGEN blue of lynnagen.com in both themes — a warm-white
   page with navy type in light, a deep blue-black page in dark — and the evidence figures
   carry the brand blue rather than a status teal. */

:root{
  /* ---- type scale. 12px floor. Sizes exist ONLY as tokens. ---- */
  --fs-display:30px;   --lh-display:1.15;
  --fs-masthead:34px;  --lh-masthead:1.12;
  --fs-metric:28px;    --lh-metric:1.15;
  --fs-title:20px;     --lh-title:1.30;
  --fs-subhead:16px;   --lh-subhead:1.40;
  --fs-body:15px;      --lh-body:1.60;
  --fs-control:15px;   --lh-control:1.45;
  --fs-meta:13px;      --lh-meta:1.50;
  --fs-micro:12px;     --lh-micro:1.40;
  --fs-mono-id:14px;   --lh-mono-id:1.50;
  --fs-mono-log:13px;  --lh-mono-log:1.55;
  /* the two documented exceptions, both confined to the evidence coverage band */
  --fs-wall-total:44px; --lh-wall-total:1.0;
  --fs-wall-stat:32px;  --lh-wall-stat:1.0;

  /* Weights: 400 / 600 / 700 only. */
  --w-reg:400; --w-med:600; --w-bold:700;
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;

  /* ---- surfaces and type, one cool hue: warm-white page, navy ink ---- */
  --bg:#fafcfe; --surface:#ffffff; --surface-2:#f5f8fb; --surface-3:#eaf0f6;
  --line:#dce5ee; --line-strong:#c5d2df; --line-input:#aebdcc;
  --text:#10243b; --text-2:#5f6f81; --text-3:#6f8093;

  /* ---- accent: LYNNAGEN navy. The only non-clinical saturated hue. ---- */
  --accent:#0b3d73; --accent-fg:#ffffff; --focus:#0b3d73;

  /* ---- the mark's helix, for helix.js on the running phase alone ---- */
  --helix-a:#052e5d; --helix-b:#d91f2c; --helix-rung-a:#052e5d; --helix-rung-b:#ec1e24;

  /* ---- the ground of a QR code (two-step sign-in, Account): white in both themes, or a phone cannot read it ---- */
  --qr-ground:#ffffff;

  /* ---- the five clinical tiers, plus the neutral sixth state.
     The bg/border pairs are the contract-pinned values and must not drift.
     Likely benign and Benign are separated by LUMINANCE, not hue. ---- */
  --tier-p-bg:#fff0f0;   --tier-p-line:#b44646;   --tier-p-fg:#8f1d1d;
  --tier-lp-bg:#fff4e9;  --tier-lp-line:#d48642;  --tier-lp-fg:#874900;
  --tier-vus-bg:#fff9dd; --tier-vus-line:#aa8d1f; --tier-vus-fg:#6f5a00;
  --tier-lb-bg:#f1fbf3;  --tier-lb-line:#6a9c73;  --tier-lb-fg:#2f7d55;
  --tier-b-bg:#eaf9ef;   --tier-b-line:#38885a;   --tier-b-fg:#12603a;
  --tier-none-bg:transparent; --tier-none-line:#c5d2df; --tier-none-fg:#5f6f81;

  /* ---- the evidence figures' colour: the brand blue, never a green. Permitted ONLY
     inside the evidence wall (.wall / .ev-*), which renders on the overview phase alone,
     a phase that contains no classification chip. The token keeps its historical name
     so the confinement tests keep guarding it. ---- */
  --ready:#0b3d73;
  --ready-line:rgba(11,61,115,.35);
  --ready-wash:rgba(11,61,115,.04);
  --ready-glow:rgba(11,61,115,.20);
  --ready-glow-soft:rgba(11,61,115,.10);

  /* ---- shape, depth, space ---- */
  --r-sm:8px; --r-md:10px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(16,36,59,.05);
  --shadow-2:0 12px 28px rgba(16,36,59,.14);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1520; --surface:#0f1b28; --surface-2:#12202e; --surface-3:#18293a;
  --line:#263747; --line-strong:#33475b; --line-input:#40566d;
  --text:#f3f6fa; --text-2:#a7b6c6; --text-3:#8a9bad;
  --accent:#78aeed; --accent-fg:#0b1520; --focus:#78aeed;
  --helix-a:#4f83e8; --helix-b:#e8434b; --helix-rung-a:#4f83e8; --helix-rung-b:#f04a52;
  --qr-ground:#ffffff;
  --tier-p-bg:#3a1614;   --tier-p-line:#7e3a35;   --tier-p-fg:#ffb3b7;
  --tier-lp-bg:#38260f;  --tier-lp-line:#7d5c2a;  --tier-lp-fg:#ffd19a;
  --tier-vus-bg:#322b10; --tier-vus-line:#736327; --tier-vus-fg:#f7df82;
  --tier-lb-bg:#16301f;  --tier-lb-line:#35714b;  --tier-lb-fg:#a9e6c1;
  --tier-b-bg:#0e2418;   --tier-b-line:#256b45;   --tier-b-fg:#4fbb80;
  --tier-none-bg:transparent; --tier-none-line:#33475b; --tier-none-fg:#a7b6c6;
  --ready:#78aeed;
  --ready-line:rgba(120,174,237,.35);
  --ready-wash:rgba(120,174,237,.05);
  --ready-glow:rgba(120,174,237,.22);
  --ready-glow-soft:rgba(120,174,237,.10);
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 12px 28px rgba(0,0,0,.55);
}

html{color-scheme:light}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:var(--w-reg) var(--fs-body)/var(--lh-body) var(--font-ui);
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
b,strong{font-weight:var(--w-med)}
a{color:var(--accent)}
:root{--theme-control-bg:transparent;--theme-control-border:var(--line);--theme-control-text:var(--text-2)}

/* Quieter than any application action: a hairline control with an icon and a short
   label. Hover is a tonal step, focus is the ring every control shares. */
.theme-toggle{
  appearance:none;
  border:1px solid var(--theme-control-border);
  background:var(--theme-control-bg);
  color:var(--theme-control-text);
  border-radius:var(--r-sm);
  padding:6px 12px;
  min-height:36px;
  font:var(--w-med) var(--fs-meta)/var(--lh-meta) var(--font-ui);
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:var(--s2);
}
.theme-toggle::before{content:'';width:12px;height:12px;border-radius:50%;
  border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.theme-toggle:hover{border-color:var(--line-strong);color:var(--text)}