/* ░░░ tokens.css — shared design tokens for index.html + the satellite pages ░░░
   Canonical home of: the palette, the type ramp, chart hues, spacing/radius/elevation.
   index.html loads this BEFORE styles.css; styles.css owns layout, this owns language. */
:root {
  /* ── core palette — deep-space + vivid spectrum (2026-08 redesign) ──
     the chrome went from phosphor-green terminal to space-navy glass; mint stays
     the SEMANTIC color (forward / resolved / accelerating), the spectrum below
     carries the data. */
  --bg: #040614;
  --bg-soft: #0a0e22;
  --ink: #c6d1e6;
  --ink-dim: #7787a3;
  --ink-faint: #8391ad;
  --ink-hi: #eef3ff;
  --accent: #5ef0a8;          /* phosphor mint — hope / resolved / accelerating */
  --accent-dim: #2f7d63;
  --warn: #f2c14e;
  --strike: #e85d43;
  --glow: 0 0 1px rgba(94, 240, 168, .42);
  --glow-strong: 0 0 2px rgba(94, 240, 168, .55), 0 0 18px rgba(94, 240, 168, .2);

  /* ── the spectrum — the vivid band the reference design runs on ── */
  --vio: #a78bfa;  --blu: #6ea8ff;  --cyn: #3fd9ff;
  --pnk: #ff7ad9;  --amb: #ffb45c;  --lim: #e2f65e;
  --spectrum: linear-gradient(93deg, #a78bfa 0%, #6ea8ff 24%, #3fd9ff 44%, #5ef0a8 64%, #f5d76e 84%, #ff9a5c 100%);
  --glow-cyan: 0 0 2px rgba(63, 217, 255, .5), 0 0 18px rgba(63, 217, 255, .18);
  --glow-vio: 0 0 2px rgba(167, 139, 250, .5), 0 0 18px rgba(167, 139, 250, .18);

  /* ── satellite aliases (article / method / intelligence / curves inline styles) ── */
  --dim: #7787a3;
  --faint: #5c6880;
  --mint: #5ef0a8;
  --mint-dim: #2f7d63;
  --coral: #ff7a63;

  /* ── type ── */
  --mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
  --disp: 'Space Grotesk', 'IBM Plex Mono', ui-monospace, monospace;   /* the headline face — finally not mono */
  --serif: 'Instrument Serif', Georgia, serif;

  /* ── chart hues — one per need/sector, vivid, legible on --bg ── */
  --ch-1: #5ef0a8;  --ch-2: #3fd9ff;  --ch-3: #6ea8ff;  --ch-4: #a78bfa;
  --ch-5: #ff7ad9;  --ch-6: #ff8a73;  --ch-7: #f5d76e;  --ch-8: #e2f65e;
  --ch-9: #7dffc9;  --ch-10: #7fe0ff; --ch-11: #ffce7a;

  /* ── surfaces + elevation — cool glass over space-navy ── */
  --surface-1: rgba(199, 214, 240, .035);
  --surface-2: rgba(199, 214, 240, .06);
  --hair: rgba(199, 214, 240, .15);
  --elev-1: 0 8px 30px rgba(2, 4, 14, .5);
  --elev-2: 0 18px 60px rgba(2, 4, 14, .6);

  /* ── radius + spacing scale ── */
  --r-s: 6px;  --r-m: 10px; --r-l: 16px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 20px; --sp-5: 32px; --sp-6: 52px;
}


/* ── satellite chrome: sticky section-nav + dense-block folds (built by js/sat-nav.js) ── */
.sat-nav {
  position: sticky; top: 10px; z-index: 30;
  display: flex; gap: 6px; overflow-x: auto;
  padding: 7px 9px; margin: 0 0 28px;
  border: 1px solid var(--hair); border-radius: 999px;
  background: rgba(5, 7, 18, .74);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--elev-1);
  scrollbar-width: none;
}
.sat-nav::-webkit-scrollbar { display: none; }
.sat-nav a {
  flex: none; max-width: 230px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); background: none;
  border: 1px solid transparent; border-radius: 999px; padding: 5px 11px;
}
.sat-nav a:hover { color: var(--mint); border-color: var(--mint-dim); border-bottom: 1px solid var(--mint-dim); }
.sat-nav a.on { color: var(--mint); border-color: var(--mint-dim); background: rgba(94, 240, 168, .08); }
.sat-fold {
  border: 1px solid var(--hair); border-radius: var(--r-m);
  background: var(--surface-1);
  margin: 14px 0; padding: 0 16px 4px;
}
.sat-fold > summary {
  cursor: pointer; list-style: none;
  margin: 0 -16px; padding: 12px 16px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.sat-fold > summary::-webkit-details-marker { display: none; }
.sat-fold > summary::before { content: '+ '; color: var(--mint); }
.sat-fold[open] > summary::before { content: '− '; }
.sat-fold > summary:hover { color: var(--mint); }
@media (max-width: 640px) {
  /* full-bleed opaque bar: as a floating translucent pill it let the page text
     scroll through its rounded ends and the 6px gap above it — on a phone that
     reads as a rendering bug, not as glass. */
  .sat-nav {
    top: 0; margin: 0 calc(50% - 50vw) 22px; padding: 8px 14px;
    border-radius: 0; border-left: 0; border-right: 0;
    background: rgba(5, 7, 18, .95);
  }
  .sat-nav a { font-size: 10px; padding: 7px 10px; max-width: none; }   /* 44px-ish targets, no mid-word ellipsis */
}