/* ============================================================
   Meridian 9 — design tokens
   Copied 2026-08-16 from the application prototype's design
   tokens (the approved palette), with ONE correction: the source
   file's "text roles" comment closed early and left a stray close
   marker, which makes CSS error recovery consume the entire
   `--text-primary` declaration. Parsed and verified here: every
   token below resolves. If the palette changes upstream, re-copy
   deliberately — do not let the two drift apart silently.
   ============================================================ */

:root {
  /* ---- base palette (do not alter) ---- */
  --c-ink:        #191D23;  /* near-black      L 0.012 */
  --c-slate:      #57707A;  /* teal-slate      L 0.150 */
  --c-bluegrey:   #7E919F;  /* blue-grey       L 0.272 */
  --c-peri:       #979DAB;  /* periwinkle      L 0.336 */
  --c-mauve:      #C5BAC4;  /* mauve           L 0.510 */
  --c-lightgrey:  #DEDCDC;  /* light grey      L 0.719 */

  /* ---- addition 1: panel surface ----
     Required, not cosmetic. No two colours in the palette above
     exceed 1.65:1 contrast, so a panel filled with a palette
     colour cannot lift off the page. This is the one near-white
     step above --c-lightgrey that makes elevation possible. */
  --c-panel:      #F2F0EE;

  /* ---- addition 2: status colours, two steps each ----
     MARK step: chart fills. TEXT step: status words as text,
     AA-verified on both --c-lightgrey (page) and --c-panel. */
  --status-critical-mark:  #B93A2E;
  --status-warning-mark:   #BE8A1F;
  --status-healthy-mark:   #27825A;

  --status-critical-text:  #8A3F3A;  /* 6.48 on panel, 5.39 on page */
  --status-warning-text:   #7A5730;  /* 5.71 on panel, 4.76 on page */
  --status-healthy-text:   #3C5F4C;  /* 6.30 on panel, 5.24 on page */

  /* ---- surface roles ---- */
  --page:            var(--c-lightgrey);
  --surface:         var(--c-panel);
  --surface-sunken:  #E9E6E3;
  --surface-dark:    var(--c-ink);

  /* ---- text roles ----
     --c-bluegrey and --c-peri are non-text roles exclusively
     (2.39:1 and 1.99:1 — nowhere near AA).

     --text-secondary is a darkened step of --c-slate rather than
     --c-slate itself. Raw #57707A clears AA on the panel (4.61) but
     NOT on the page background (3.84), which made every page-level
     caption fail. One token that passes on both grounds beats two
     tokens and a rule to remember. #57707A survives as --accent
     for non-text use (rules, borders, focus, gradients).
     Darkened again when the page wash got more colourful: the wash's
     darkest region is now #C5C5DD, where the previous #4A5F68 fell
     to 3.99. Measured per text region against the rasterised wash,
     not against body's flat background-color (which is hidden
     underneath the gradient and misled an earlier audit). */
  --text-primary:    var(--c-ink);      /* 14.88 panel · 12.39 page */
  --text-secondary:  #41545C;           /*  6.98 panel ·  4.71 worst page region */
  --text-on-dark:    var(--c-lightgrey);/*  6.21 on the lit nav band */
  --text-on-dark-dim:#BFC8CE;           /*  4.68 on the lit tenant/foot bands */

  /* ---- non-text roles ---- */
  --border:          var(--c-mauve);
  --border-soft:     #DCD5DA;
  --grid:            var(--c-mauve);
  --track:           #DDD8DC;
  --chart-neutral:   var(--c-bluegrey);
  --chart-tertiary:  var(--c-peri);
  --accent:          var(--c-slate);

  /* ---- organic: gradient washes ---- */
  --wash-page:
    radial-gradient(115% 85% at 6% -12%,  rgba(216,166,210,.82) 0%, rgba(216,166,210,0) 54%),
    radial-gradient(95% 72% at 102% 4%,   rgba(136,188,210,.60) 0%, rgba(136,188,210,0) 50%),
    radial-gradient(120% 95% at 55% 118%, rgba(162,170,222,.54) 0%, rgba(162,170,222,0) 58%),
    linear-gradient(158deg, #EAE5E9 0%, #E0DCDF 46%, #D6D2DC 100%);
  --wash-sidebar:
    radial-gradient(115% 55% at 14% -2%, rgba(87,112,122,.95)  0%, rgba(87,112,122,0)  80%),
    radial-gradient(100% 30% at 90% 38%, rgba(126,145,159,.28) 0%, rgba(126,145,159,0) 62%),
    radial-gradient(85% 40% at 95% 102%, rgba(197,186,196,.16) 0%, rgba(197,186,196,0) 55%),
    linear-gradient(172deg, #2E3B47 0%, #27333D 50%, #212A32 100%);
  --wash-accent-bar:  linear-gradient(94deg, var(--c-slate) 0%, var(--c-peri) 62%, var(--c-mauve) 100%);
  --wash-nav-active:  linear-gradient(96deg, rgba(87,112,122,.95) 0%, rgba(126,145,159,.55) 100%);

  /* ---- shape ---- */
  --r-panel:  22px;
  --r-inner:  14px;
  --r-chip:   9px;
  --r-bar:    4px;

  /* ---- elevation. Panels need shadow + hairline because fill
     difference alone (1.20:1) is invisible. ---- */
  --shadow-panel:
    0 1px 2px rgba(25,29,35,.05),
    0 10px 28px -10px rgba(25,29,35,.13);
  --shadow-panel-hover:
    0 1px 2px rgba(25,29,35,.06),
    0 16px 38px -12px rgba(25,29,35,.20);
  --shadow-pop:
    0 2px 6px rgba(25,29,35,.10),
    0 18px 40px -12px rgba(25,29,35,.28);

  /* ---- type ---- */
  --font-sans: "Segoe UI Variable Display", "Segoe UI", system-ui,
               -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-hero:  52px;
  --fs-stat:  30px;
  --fs-h2:    16px;
  --fs-body:  14px;
  --fs-sm:    13px;
  --fs-xs:    11.5px;

  /* ---- space ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 44px;

  /* ---- organic: eased transitions ---- */
  --ease: cubic-bezier(.4, .14, .3, 1);
  --dur:  180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}