/* theme.css -- the site's one palette: near-black, emerald, Vegas gold, white.

   Every page links it from the managed head block (tools/sync_nav.py writes it
   after the page's own <style> and after backdrop.css), so a value set here
   wins over the per-page :root blocks without touching them. Change a colour
   here and the whole site follows; no page or stylesheet should carry a hex of
   its own (tools/theme_check.py lists any that do).

   Roles, not hues:
     gold     -- labels, eyebrows, fine rules, stripes, the price (the market)
     emerald  -- interaction (hover, current, focus), live and settled states,
                 the brand surfaces (bands, hero washes)
     white    -- text
     good/bad -- a gain or a loss. Green is the brand colour now, so a gain is
                 never shown by colour alone: every signed figure keeps its
                 + / − sign (or a word: YES, NO, RULED OUT) and the colour only
                 repeats it.

   Contrast (WCAG 2.x, on --bg #040706 / --surface #0a120f / glass over an
   emerald field #0a1c16):
     --text      18.4 / 17.3 / 16.1     --gold     9.6 / 9.0 / 8.4
     --text-2    15.6 / 14.7 / 13.6     --em-300  12.0 / 11.3 / 10.5
     --muted      9.5 /  9.0 /  8.3     --link    10.9 / 10.2 /  9.5
     --faint      6.2 /  5.8 /  5.4     --bad      8.9 /  8.3 /  7.7
     white on --em-700 6.65 · white on --em-900 12.5 · gold on --em-900 5.9
     --on-accent on --gold 9.1 · on --em-300 11.5 · --market (gold-400) 11.9 / 11.1 / 10.3
   Gold on --em-700 is 3.2: large text and rules only. --faint is for small
   print on panels, never over raw art. */

:root{
  color-scheme:dark;

  /* raw channels, for tints: rgb(var(--em-rgb) / .35) */
  --bg-rgb:4 7 6;
  --surface-rgb:10 18 15;
  --em-rgb:63 191 133;          /* --em-400: borders, glows, washes */
  --em-soft-rgb:111 220 170;    /* --em-300 */
  --gold-rgb:197 179 88;        /* --gold-500, Vegas gold */
  --text-rgb:243 245 241;
  --bad-rgb:255 138 128;
  --warn-rgb:255 162 76;

  /* ground */
  --bg:#040706;                 /* also <meta name="theme-color"> */
  --bg-2:#070c0a;
  --surface:#0a120f;            /* cards, tables, menus (solid) */
  --surface-2:#0f1b16;          /* hover, raised */
  --surface-3:#14241d;

  /* emerald (the email's green9 / green7 / green5 are --em-900 / 700 / 500) */
  --em-950:#03231a; --em-900:#0e3b2e; --em-800:#125139; --em-700:#17694a; --em-600:#1f8559;
  --em-500:#2e9e6b; --em-400:#3fbf85; --em-300:#6fdcaa; --em-200:#a6ecc9; --em-100:#dcf7ea;

  /* Vegas gold */
  --gold-900:#2e2912; --gold-800:#5a4f22; --gold-700:#7d6d22; --gold-600:#a6922c;
  --gold-500:#c5b358; --gold-400:#d6c77a; --gold-300:#e9dfa8; --gold-100:#f8f4e3;
  --gold:var(--gold-500);

  /* type */
  --text:#f3f5f1; --text-2:#dde4df; --muted:#a9b5ad; --faint:#84928a;
  --link:#5fd39c; --link-hover:var(--em-200);
  --on-accent:#04110b;          /* text on a gold or light-emerald fill */
  --on-emerald:#ffffff;         /* text on --em-700 and darker */

  /* lines */
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.14);
  --line-gold:rgb(var(--gold-rgb) / .30);
  --line-em:rgb(var(--em-rgb) / .35);

  /* states (never colour alone: a sign, a word or an icon goes with each) */
  --good:var(--em-300);
  --bad:#ff8a80; --bad-deep:#7f1d1d;
  --warn:#ffa24c;               /* the 4.41(b) box, "closed": orange, kept clear of the gold */
  --focus:var(--em-300);

  /* charts: validated (dataviz validate_palette.js, dark, surface #0a120f,
     all pairs): CVD ΔE 12.7, normal-vision ΔE 18.8, every mark >= 3:1 */
  --viz-a:#147a51;              /* emerald */
  --viz-b:#a6922c;              /* gold, one step under Vegas gold so it sits in the dark band */
  --viz-c:#5f75c1;              /* slate blue: a third series only */
  --viz-grid:rgba(255,255,255,.07);
  --viz-zero:rgba(255,255,255,.22);

  /* ---- the names the pages already use, re-pointed ---------------------- */
  --ink:var(--bg); --ink-3:var(--surface-2);
  --paper:var(--bg);
  /* panels are glass over the backdrop (was backdrop.css) */
  --ink-2:rgb(var(--surface-rgb) / .72);
  --paper-2:rgb(var(--surface-rgb) / .70);
  --brass:var(--gold-500);      /* labels, stripes, rules: gold */
  --brass-soft:var(--em-300);   /* hover, current, live, emphasis: emerald */
  --market:var(--gold-400);     /* the price */
  --ink-text:var(--text); --ink-muted:var(--muted); --ink-faint:var(--faint);
  --paper-text:var(--text-2); --paper-muted:var(--muted);
  --line-ink:var(--line); --line-paper:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.03);
  --field:#06100b;
  --bd-base:var(--bg);
}

::selection{background:rgb(var(--gold-rgb) / .35);color:var(--text)}
html{scrollbar-color:var(--em-800) var(--bg)}

/* paper: dark ink on white. backdrop.css already whitens the page and drops the
   art for print; without this the light text tokens printed light on white. */
@media print{
  :root{
    color-scheme:light;
    --bg-rgb:255 255 255; --surface-rgb:255 255 255;
    --bg:#fff; --bg-2:#fff; --surface:#fff; --surface-2:#f3f5f1; --surface-3:#eef1ed;
    --text:#111814; --text-2:#1d2621; --muted:#46524b; --faint:#5a665f;
    --gold-500:#7d6d22; --gold-400:#7d6d22; --gold-300:#5a4f22;
    --em-300:#17694a; --em-200:#125139; --em-100:#0e3b2e; --link:#17694a;
    --bad:#b42318; --warn:#8a5300; --on-accent:#fff;
    --line:rgba(0,0,0,.14); --line-paper:rgba(0,0,0,.12); --glass:transparent;
  }
}

/* scale tokens (append to the :root block) ================= */
:root{
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --fs-display:clamp(36px,5.6vw,64px);
  --fs-h1:clamp(30px,4.6vw,50px);
  --fs-h2:clamp(20px,2.4vw,24px);
  --fs-h3:17px;
  --fs-lead:17px;
  --fs-body:16px;
  --fs-small:14.5px;
  --fs-meta:12.5px;
  --fs-label:11px;
  --fs-micro:10.5px;
  --lh-tight:1.06; --lh-head:1.2; --lh-body:1.6;
  --tr-eyebrow:.18em; --tr-label:.14em; --tr-display:-.015em;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px;

  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  --sh-1:inset 0 1px 0 rgba(255,255,255,.04),0 10px 30px -12px rgba(0,0,0,.7);
  --sh-2:0 24px 60px -24px rgba(0,0,0,.85);
  --glow-em:0 0 0 1px rgb(var(--em-rgb) / .35),0 8px 28px -8px rgb(var(--em-rgb) / .35);
  --glow-gold:0 0 0 1px rgb(var(--gold-rgb) / .40),0 8px 28px -10px rgb(var(--gold-rgb) / .35);

  --hair-gold:1px solid rgb(var(--gold-rgb) / .35);
  --rule-gold:linear-gradient(90deg,transparent,rgb(var(--gold-rgb) / .55) 18%,rgb(var(--gold-rgb) / .55) 82%,transparent);
  --viz-ref:var(--gold-600);   /* the "price is right" diagonal */
  --mark-good:var(--em-600);    /* a gain as a chart mark (darker than the text step, so it parts from --bad by lightness) */
}
@media (max-width:640px){:root{--fs-lead:15.5px}}

/* focus, motion, forced colours, print ===================== */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn:focus-visible,.chip:focus-visible{outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .mast{display:none}
  .stat,.figure,.hypo,.card,details.fold{border:1px solid CanvasText}
  .hypo::before{background:CanvasText}
  :focus-visible{outline-color:Highlight}
}
@media print{
  .mast,video{display:none!important}
  main h2::before{opacity:1}
}