:root {
  /* color */
  --void-black: #050505;
  --nova-white: #F2ECE3;
  --ash-grey: #9A958C;
  --supernova: #FF5A1F;
  --plasma-magenta: #FF2E7E; /* logo burst gradient ONLY */

  /* type families */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, Helvetica, Arial, sans-serif;

  /* fluid type scale (clamped) */
  --text-display: clamp(64px, 18vw, 200px);
  --text-h1: clamp(40px, 9vw, 100px);
  --text-h2: clamp(32px, 5vw, 56px);
  --text-h3: clamp(22px, 3vw, 30px);
  --text-body: clamp(16px, 1.4vw, 18px);
  --text-caption: 14px;

  /* spacing scale */
  --space-1: 8px;  --space-2: 14px; --space-3: 20px; --space-4: 30px;
  --space-5: 48px; --space-6: 80px; --space-7: 120px; --space-8: 200px;

  --radius-pill: 120px;
  --radius-card: 18px;
  --shadow-hard: 0 4px 0 var(--ash-grey);
  --shadow-hard-lift: 0 6px 0 var(--ash-grey);   /* hover: button lifts off the page */
  --shadow-hard-press: 0 2px 0 var(--ash-grey);  /* active: button pressed into the page */
  --maxw-prose: 680px;

  /* motion: strong custom curves (built-in CSS easings are too weak) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}