/* Design tokens — see DESIGN_SYSTEM.md */
:root {
  --bg: #0a0e14;
  --surface: #111823;
  --surface-2: #18212f;
  --line: #243044;
  --text: #e8edf3;
  --muted: #9aa8b8;
  --accent: #3ddc97;
  --accent-2: #f5b841;
  --danger: #ff6b6b;

  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, monospace;

  --fs-0: clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);
  --fs-1: 1rem;
  --fs-2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-3: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-4: clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --fs-num: clamp(1.9rem, 1.3rem + 1.8vw, 2.75rem);
  --header-h: 72px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --section-pad: clamp(64px, 10vw, 128px);
  --container: 1200px;
  --radius: 12px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med: 300ms;
  --dur-slow: 600ms;
  --orbit-period: 60s;

  /* Timeline lanes — validated pair (dataviz validator, dark surface #111823): all checks pass, CVD ΔE 9.3 */
  --lane-ops: #2aa874;
  --lane-growth: #bf8420;
  --overlap: color-mix(in srgb, var(--text) 8%, transparent);
}

@media (max-width: 767px) {
  :root { --header-h: 132px; } /* header wraps to two rows on phones */
}