/* ============================================================================
   MERIDIAN — SHARED DESIGN TOKENS
   Single source of truth for colour, type, spacing, and radius across
   landing.html and meridian-situation.html. Linked from both pages BEFORE
   their inline <style>. Page-specific rules stay inline and reference
   var(--…) only — no page redefines a token.

   Apple HIG intent: clarity (content over decoration), deference (chrome
   recedes — one hairline weight, no glows, no gradients), depth from
   layering not borders, consistency (one accent per meaning).

   SEMANTIC COLOUR LAW  ("Aurora" palette, 2026-09 — lively, not clinical)
   - --brand (green) ............ Meridian's brand + primary CTA. Nothing else.
                                  Never severity, never price, never decoration.
   - --chain  (gold) ........... "transmission chain confirmed" indicators in
                                  the Situation Room ONLY. Never on landing.html.
                                  Thin structure only (chain arrows, the "what
                                  would break this" rule).
   - --sev-* ................... HIGH (coral) / ELEVATED (violet) / WATCH (cool
                                  grey). A real heat spectrum — ELEVATED now
                                  carries a hue. Each has a --*-wash tint used
                                  for panel backgrounds on story cards / feed
                                  rows (NOT on dense data surfaces).
   - --price-* ................. up / down / flat. Independent of brand & severity.
                                  --price-down deliberately shares the coral value
                                  with --sev-high (both files already do this).
   ============================================================================ */

:root{
  /* ---- ground & surface — "Malachite": deeper jewel-green on cool graphite */
  --ground:          #090C10;   /* page ground — cool near-black */
  --surface-1:       #10141A;   /* cards, rail sections, nav / header fill */
  --surface-2:       #191F27;   /* raised: inputs, position-call cards, popovers, modal */
  --hairline:        rgba(255,255,255,.10);   /* every divider / border, both pages */
  --hairline-strong: rgba(255,255,255,.18);   /* rail edge + table header rule only */

  /* ---- text — three levels + on-accent --------------------------------- */
  --text-1:          #EAEEF3;   /* primary ink — headlines, key values */
  --text-2:          #A6AEBA;   /* body / secondary */
  --text-3:          #727C8A;   /* meta — labels, timestamps, sources */
  --text-on-accent:  #04120B;   /* text on the --brand fill */

  /* ---- brand green — CTA + brand only.  "Malachite": deeper jewel tone -- */
  --brand:           #00CE92;
  --brand-hover:     #2FE0AB;
  --brand-wash:      rgba(0,206,146,.12);  /* active / selected tint, focus-ring bg */

  /* ---- chain-confirmed — Situation Room only, thin structure only ----- */
  --chain:           #F3A93C;
  --chain-wash:      rgba(243,169,60,.14);

  /* ---- severity — HIGH (coral) / ELEVATED (violet) / WATCH (cool grey) - */
  --sev-high:        #FF5B6B;
  --sev-high-wash:   rgba(255,91,107,.13);
  --sev-elevated:    #A98BFF;
  --sev-elevated-wash: rgba(169,139,255,.13);
  --sev-watch:       #7A8798;
  --sev-watch-wash:  rgba(122,135,152,.12);

  /* ---- price direction — independent of brand & severity ------------- */
  --price-up:        #2FD98C;
  --price-down:      #FF5B6B;   /* shares the coral with --sev-high, intentionally */
  --price-flat:      var(--text-3);

  /* ---- motion — shared so both pages animate identically ------------- */
  --dur-fast:   120ms;   /* constant elements: nav, frequent toggles, presses */
  --dur-mid:    220ms;   /* occasional: detail pane, filter, accordion */
  --dur-slow:   300ms;   /* rare / large: first open, section reveal */
  --ease-out:    cubic-bezier(.22,1,.36,1);      /* entrances, hovers */
  --ease-settle: cubic-bezier(.34,1.35,.64,1);   /* gentle overshoot — "arrive / pop" */
  --ease-sheet:  cubic-bezier(.32,.72,0,1);      /* iOS-style sheet slide */

  /* ---- type — display + workhorse + mono.
     Cabinet Grotesk (display, headings >=19px) and General Sans (UI labels +
     body) load from Fontshare; JetBrains Mono from Google. Both pages must
     link both stylesheets in <head>. Cabinet loses character below ~19px, so
     small UI labels run in General Sans, never the display face. */
  --font-display:    'Cabinet Grotesk','General Sans',system-ui,sans-serif;
  --font-sans:       'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --font-mono:       'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;   /* data / numbers */

  /* ---- type scale — one ramp.  xs–lg shared;  xl / 2xl are landing-only */
  --text-xs:    11px;   --lh-xs:   1.45;   /* mono labels, stamps, sources */
  --text-sm:    13px;   --lh-sm:   1.5;    /* captions, table cells, secondary UI */
  --text-base:  15px;   --lh-base: 1.55;   /* body copy */
  --text-md:    19px;   --lh-md:   1.4;    /* card headline, sub-section head, landing lede */
  --text-lg:    25px;   --lh-lg:   1.25;   /* "The Read" headline, tool section head */
  --text-xl:    clamp(28px,4vw,44px);   --lh-xl:  1.1;    /* landing section headers */
  --text-2xl:   clamp(36px,6vw,60px);   --lh-2xl: 1.05;   /* landing hero */

  --track-tight: -0.02em;   /* --text-xl / --text-2xl only */
  --track-label:  0.14em;   /* mono labels / eyebrows */

  /* ---- spacing — 4px base.  1–7 = Situation Room's existing scale ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  48px;
  --sp-9:  64px;
  --sp-10: 96px;   /* landing section rhythm */

  /* ---- one corner radius ------------------------------------------- */
  --radius:      6px;     /* cards, buttons, inputs, tiles, popovers, modal */
  --radius-full: 999px;   /* pills + dots — the only exception */

  /* ---- page-level depth wash — opt-in per page via body::before.
     landing.html only (2026-09 polish pass); meridian-situation.html stays
     flat — even this faint a wash costs legibility on a dense data screen. */
  --bg-mesh:
    radial-gradient(900px 620px at 8% -8%, rgba(0,206,146,.07), transparent 60%),
    radial-gradient(760px 560px at 100% 24%, rgba(169,139,255,.05), transparent 62%),
    radial-gradient(640px 520px at 32% 118%, rgba(0,206,146,.04), transparent 60%);

  /* ---- structural constants -------------------------------------- */
  --header-h: 52px;
  --rail-w:   260px;
  --content-max: 1160px;   /* landing container */
  --room-max:    1340px;   /* Situation Room .room grid */
}

/* Frostier surfaces + firmer edges when the OS asks for less transparency. */
@media (prefers-reduced-transparency: reduce){
  :root{
    --hairline:        rgba(255,255,255,.18);
    --hairline-strong: rgba(255,255,255,.30);
    --surface-1:       #131820;
    --surface-2:       #1D242D;
  }
}

/* Near-solid separation for prefers-contrast: more. */
@media (prefers-contrast: more){
  :root{
    --hairline:        rgba(255,255,255,.30);
    --hairline-strong: rgba(255,255,255,.44);
    --text-2:          #C2C9D2;
    --text-3:          #8A929B;
  }
}