/* ==========================================================================
   Vantage design tokens
   Instrument-grade dark system: pure-black canvas, a four-step surface ladder,
   two rule weights, and three status colors that each mean exactly one thing.
   ========================================================================== */
:root {

  /* --- Surfaces ------------------------------------------------------------
     A four-step ladder measured in CIE L*: 0.0 / 4.2 / 9.1 / 14.0.
     Every level is used in more than one place. Sections alternate between
     canvas and band; panels sit at panel; panel headers sit at chrome.

     The ladder was previously 0.0 / 2.7 / 5.0 / 9.1, which compressed three
     of the four steps into the bottom 5 L*. Two consequences, both visible:
     a band section was almost indistinguishable from the canvas behind it,
     so section separation fell entirely to the 1px rule; and a panel sitting
     inside a band section cleared its background by only 2.3 L*. Steps are
     now even at roughly 4.2 / 4.9 / 4.9, so every level separates from its
     neighbour without any level leaving near-black.                         */
  --surface-canvas: #000000;   /* L*  0.0  page base, default section        */
  --surface-band:   #0c0f14;   /* L*  4.2  alternating section band          */
  --surface-panel:  #151a22;   /* L*  9.1  raised panels, cards, inputs      */
  --surface-chrome: #1e242e;   /* L* 14.0  panel headers, inset bars, chips  */

  /* --- Rules ---------------------------------------------------------------
     Two weights only. Hairline divides inside a container; edge draws the
     structural boundaries (section edges, panel perimeters).
     Hairline was lifted alongside the surface ladder: at #343b44 it measured
     only 1.38:1 on the new chrome and was effectively gone inside a panel
     header. edge is unchanged and still measures 3.01:1 on canvas.          */
  --rule-hairline: #3d4552;    /* 2.17:1 on canvas, 1.61:1 on chrome */
  --rule-edge:     #525a66;    /* 3.01:1 on canvas, 2.24:1 on chrome */

  /* --- Text ----------------------------------------------------------------
     All four tiers clear WCAG AA (4.5:1) on all four surfaces. The worst
     pairing in the system is --text-faint on --surface-chrome at 4.61:1.
     faint moved from #7d828b when the ladder lifted: against the new chrome
     the old value measured 4.04:1 and no longer cleared AA.                 */
  --text-primary: #ffffff;     /* headings, key figures             ≥ 15.59:1 */
  --text-body:    #e8eaec;     /* body copy on panels               ≥ 12.93:1 */
  --text-muted:   #a1a4a5;     /* secondary copy, descriptions       ≥ 6.21:1 */
  --text-faint:   #878c95;     /* labels, timestamps, fine print     ≥ 4.61:1 */

  /* --- Status --------------------------------------------------------------
     The only accent colors in the system. One meaning each, applied
     consistently wherever that state appears. Never decorative.              */
  --status-nominal: #3ad389;   /* pass, benign, nominal, held by physics      */
  --status-watch:   #ffca16;   /* monitor, warning, needs an analyst          */
  --status-threat:  #ff6b5f;   /* high severity, shadowing, threat            */

  /* --- Type ---------------------------------------------------------------- */
  /* Space Grotesk carries prose. It replaced Inter, which is the default face
     of almost every scaffolded startup page and read as a template regardless
     of what surrounded it. Grotesk is wider and has a larger x-height, so it
     sets optically larger than Inter at the same px: the display sizes and
     tracking below were re-tuned for it, not inherited.

     The mono is deliberately NOT Space Mono, its superfamily sibling. Space
     Mono is slab-ish and very wide, which hurts exactly where this system uses
     mono most: dense timestamps, hashes and gate readouts. IBM Plex Mono stays,
     and the wider gap between the two families sharpens the prose-vs-machine
     split that the brand rests on. */
  --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* 400 is the body default and is never set explicitly, so it has no token. */
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  --text-micro:   11px;   /* mono labels, tags                                */
  --text-caption: 12px;   /* eyebrows, badges, footer fine print              */
  --text-body-sm: 14px;   /* dense body copy                                  */
  --text-body-md: 16px;   /* default body copy                                */
  --text-body-lg: 19px;   /* lede, mission copy                               */

  /* Fluid display sizes. Hierarchy comes from scale and tracking, not weight. */
  --text-display: clamp(38px, 6vw,   72px);
  --text-h2:      clamp(28px, 3.6vw, 44px);
  --text-h2-lg:   clamp(30px, 4.4vw, 50px);
  --text-statement: clamp(23px, 2.9vw, 34px);
  --text-h3:      clamp(24px, 3vw,   34px);

  --tracking-display: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-label:    0.2em;   /* uppercase mono eyebrows                    */

  /* --- Space --------------------------------------------------------------- */
  --spacing-4:   4px;
  --spacing-8:   8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-144: 144px;

  /* --- Layout -------------------------------------------------------------- */
  --page-max-width: 1200px;
  --header-height:  68px;
  --anchor-offset:  108px;   /* header height + clearance for jumped-to headings */
  --card-padding:   var(--spacing-32);

  /* Vertical rhythm. Three tiers, not two. With only two the page ran four
     consecutive 96px sections through its middle, which is what made it read
     as one uniform column. No two adjacent sections may share both a surface
     and a padding tier.                                                      */
  --section-pad:       var(--spacing-96);
  --section-pad-tight: var(--spacing-64);
  --section-pad-lg:    var(--spacing-128);

  /* --- Shape ---------------------------------------------------------------
     Two radii. The system is architectural: nothing is soft.                 */
  --radius-xs: 2px;   /* tags, status chips, badges                           */
  --radius-sm: 4px;   /* buttons, inputs, panels, cards, images               */

  /* --- Motion -------------------------------------------------------------- */
  --motion-fast:     150ms;
  --motion-reveal:   600ms;
  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
}