:root {
  /* ── Colors ── */
  --bg:               #08080f;   /* Void — primary background */
  --surface:          #0f0f1a;   /* Surface — cards / panels */
  --border:           #1a1a2e;   /* Depth — borders */
  --text:             #f0ece4;   /* Parchment — primary text */
  --text-muted:       #8a8a96;   /* secondary text — WCAG AA on --bg (~5.9:1) */
  --text-faint:       #333340;   /* labels, annotations */
  --accent:           #e8ff00;   /* Voltage — primary accent; use sparingly (≤15% of screen) */
  --accent-secondary: #00d4ff;   /* Trace — links, focus rings, interactive states */

  /* ── Typography ── */
  --font-display: 'Syne', 'Helvetica Neue', sans-serif;   /* 700 | 800 */
  --font-mono:    'DM Mono', 'Courier New', monospace;    /* 300 | 400 | 500 */
  --font-ui:      var(--font-mono);   /* all UI text uses DM Mono */

  /* ── Type scale ── */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */

  /* ── Spacing ── */
  --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;

  /* ── Radii (≤ 4px per brand guidelines; 0px for panels/cards) ── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.64, 0, 0.78, 0);
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
}