/* === DESIGN TOKENS — frozen after foundation phase === */
:root {
  /* Palette — dark but readable */
  --bg:            #0E1620;
  --surface:       #16202E;
  --surface-alt:   #1B2738;
  --surface-hover: #1F2F42;
  --ink:           #E6EDF5;
  --ink-soft:      #A9B7C9;
  --ink-muted:     #6B7F96;
  --border:        #27374B;
  --border-strong: #3A506B;

  /* Brand */
  --primary:        #22C55E;
  --primary-strong: #4ADE80;
  --primary-dim:    #16A34A;
  --signal:         #22C55E;
  --signal-dim:     #166B3D;
  --alert:          #FF6B4A;
  --alert-dim:      #B34933;

  /* Button text on bright surfaces */
  --btn-ink: #052E16;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale (modular, base 1rem) */
  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-2:  1.5rem;
  --step-3:  2rem;
  --step-4:  2.5rem;
  --step-5:  clamp(2.25rem, 5vw, 3.5rem);

  /* Spacing (4px base) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container:     72rem;
  --gutter:        1.25rem;
  --section-gap:   6rem;
  --section-gap-sm: 3.5rem;

  /* Components */
  --radius:     10px;
  --radius-sm:  6px;
  --radius-lg:  16px;
  --shadow:     0 1px 3px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --shadow-lg:  0 4px 12px rgba(0,0,0,.4), 0 20px 48px rgba(0,0,0,.35);
  --transition: 180ms ease;

  /* Glow accents (non-text only) */
  --glow-cyan:  0 0 24px rgba(34,197,94,.25);
  --glow-green: 0 0 16px rgba(34,197,94,.2);
}

@media (max-width: 640px) {
  :root {
    --section-gap: var(--section-gap-sm);
    --gutter: 1rem;
  }
}