/* ░░░ 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 ── */
  --bg: #050606;
  --bg-soft: #0a0c0b;
  --ink: #c9d1cb;
  --ink-dim: #6f7a73;
  --ink-faint: #7c887f;
  --ink-hi: #eef4ef;
  --accent: #5ef0a8;          /* phosphor mint — hope / resolved / accelerating */
  --accent-dim: #2f7d57;
  --warn: #e8b34a;
  --strike: #c8553d;
  --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);

  /* ── satellite aliases (article / method / intelligence / curves inline styles) ── */
  --dim: #7c887f;
  --faint: #5a655d;
  --mint: #5ef0a8;
  --mint-dim: #2f7d57;
  --coral: #e8674e;

  /* ── 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, legible on --bg ── */
  --ch-1: #5ef0a8;  --ch-2: #4fd8e8;  --ch-3: #7fb5ff;  --ch-4: #b48cf2;
  --ch-5: #f28cd8;  --ch-6: #ff8a73;  --ch-7: #e8b34a;  --ch-8: #d9e84a;
  --ch-9: #6ee8b0;  --ch-10: #8ad8ff; --ch-11: #f2c98c;

  /* ── surfaces + elevation ── */
  --surface-1: rgba(201, 209, 203, .03);
  --surface-2: rgba(201, 209, 203, .055);
  --hair: rgba(201, 209, 203, .14);
  --elev-1: 0 8px 30px rgba(0, 0, 0, .45);
  --elev-2: 0 18px 60px rgba(0, 0, 0, .55);

  /* ── 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, 6, 6, .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) {
  .sat-nav { top: 6px; margin-bottom: 22px; }
  .sat-nav a { font-size: 10px; padding: 5px 9px; }
}