/* ============================================================
   WirePitch — Design Tokens (Direction 02 · Routing)
   Source of truth for color, type, spacing, motion.
   ============================================================ */

:root {
  /* ——— Surfaces ——— */
  --void:      #0A0B0F;   /* primary canvas */
  --graphite:  #1A1D24;   /* elevated surfaces, cards, panels */
  --graphite-2:#22262F;   /* hairline dividers, subtle lifts */
  --fog:       #E8ECEF;   /* primary text, inverse surfaces */
  --fog-70:    rgba(232,236,239,0.70);
  --fog-55:    rgba(232,236,239,0.55);
  --fog-40:    rgba(232,236,239,0.40);
  --fog-25:    rgba(232,236,239,0.25);
  --fog-12:    rgba(232,236,239,0.12);
  --fog-06:    rgba(232,236,239,0.06);

  /* ——— Accent ——— */
  --mint:      #7FE7C4;
  --mint-hi:   #A8F0D7;   /* hover / pulse crest */
  --mint-lo:   #3BA888;   /* pressed / dim signal */
  --mint-06:   rgba(127,231,196,0.06);
  --mint-12:   rgba(127,231,196,0.12);
  --mint-25:   rgba(127,231,196,0.25);
  --mint-40:   rgba(127,231,196,0.40);

  /* ——— Semantic states (use only where literal) ——— */
  --state-matched: #7FE7C4;  /* success / confirmed */
  --state-route:   #6EA8FF;  /* routing / info / active */
  --state-warn:    #FFC857;  /* pending */
  --state-drop:    #FF6B6B;  /* dropped / error */
  --state-idle:    #8A8F99;  /* muted */

  /* ——— App-shell aliases (host/guest console reuse these) ——— */
  --ink:   #0A0B0F;          /* same as --void */
  --bg-1:  #0E1016;          /* card / panel surface */
  --bg-2:  #14171F;          /* lifted input / inner surface */

  /* ——— Type ——— */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* ——————————————————————————————————————————————
     Disciplined type scale. Every size on the page
     should snap to one of these. Named so code is
     self-documenting: t-14, t-18, etc.
     Base: 14, 18, 22, 28, 40, 64, 96, 160 (display).
     ——————————————————————————————————————————————  */
  --t-14:  14px;   /* captions, micro labels with prominence */
  --t-11:  11px;   /* mono labels, eyebrows */
  --t-18:  18px;   /* body + lede */
  --t-22:  22px;   /* card heads, pipeline titles */
  --t-28:  28px;   /* subheads, console main title */
  --t-40:  40px;   /* section secondary heads, flip col titles*/
  --t-64:  64px;   /* section h1 upper bound */
  --t-96:  96px;   /* hero headline lower bound */
  --t-160: 160px;  /* display moment */

  /* Legacy aliases — now snapped to the scale above. */
  --t-display:   clamp(64px, 8.3vw, 96px);
  --t-h1:        clamp(40px, 5vw, 64px);
  --t-h2:        clamp(28px, 3vw, 40px);
  --t-h3:        22px;
  --t-body-lg:   18px;
  --t-body:      14px;
  --t-body-sm:   14px;
  --t-caption:   11px;
  --t-micro:     11px;

  /* Tracking/leading tuned per scale. */
  --lh-tight:  0.92;
  --lh-snug:   1.08;
  --lh-normal: 1.35;
  --lh-loose:  1.55;

  --tr-display: -0.035em;
  --tr-tight:   -0.02em;
  --tr-normal:  -0.005em;
  --tr-wide:    0.12em;   /* caps / labels */
  --tr-wider:   0.18em;

  /* ——— Spacing (8pt grid) ——— */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;

  /* Section rhythm (vertical padding between sections). */
  --section-y: clamp(96px, 11vw, 160px);

  /* ——— Layout ——— */
  --page-max: 1440px;
  --gutter:   clamp(20px, 4vw, 64px);
  --col-gap:  24px;

  /* ——— Radii ——— */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;

  /* ——— Motion ——— */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* only for micro-reveals */

  --dur-fast: 160ms;
  --dur-med:  320ms;
  --dur-slow: 620ms;

  /* ——— Focus ——— */
  --focus-ring: 0 0 0 2px var(--void), 0 0 0 4px var(--mint);
}

/* ============================================================
   Base reset + typographic foundation
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* Load Geist at three weights, surgically used:
   300 — display type at very large sizes (feels airier, no puff)
   400 — body at reading sizes
   500 — labels, emphasis inside running copy only
*/
@font-face { font-display: swap; }

html {
  background: var(--void);
  color: var(--fog);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "ss03";  /* Geist stylistic sets */
  font-variant-numeric: tabular-nums;             /* columns of numbers line up */
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-normal);
  background: var(--void);
  color: var(--fog);
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

/* Tabular figures anywhere numbers are stacked/compared. */
.mono, code, kbd,
[class*="mono"],
.spark,
.fit,
.v,
.n,
.step-i,
.flip__stat-cell .n,
.pricing__price .amount,
.pricing__price .cadence,
.console__row .fit,
.console__bar-row .v,
.flip__filtered-row .fit,
.flip__filtered .tag,
.hero__eyebrow,
.console__queue-head,
.console__row .reason,
.console__breadcrumb,
.console__explain-path,
.console__footbar,
[data-live-latency],
[data-score],
[data-fit-label] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* Scrollbar in void tone so it doesn't break the darkness. */
html { scrollbar-color: var(--fog-25) var(--void); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--fog-12); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--fog-25); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Selection mint. Single chance to show it. */
::selection { background: var(--mint); color: var(--void); }

/* Utility classes used across components. */
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--mint);
}
.eyebrow-muted {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fog-55);
}
.hairline { height: 1px; background: var(--fog-12); border: 0; }

.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Reduced-motion honors the brief: static fallbacks everywhere. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}