:root {
  /* Creatiivy brand — derived from logo gradient (navy → violet → magenta) */
  --color-navy-deep: #0E1238;
  --color-navy: #142669;
  --color-blue: #43339A;
  --color-violet: #8B46D3;
  --color-magenta: #BB5291;
  --color-yellow: #BB5291; /* accent alias — brand magenta (legacy var name kept for CSS compat) */
  --color-accent: #8B46D3;
  --color-paper: #F7F5FB;
  --color-paper-muted: #EDE8F5;
  --color-ink: #12122A;
  --color-white: #FCFBFC;
  /* Stronger secondary text for AA-ish readability on paper */
  --color-muted: #5A5870;
  --color-muted-strong: #3F3D55;
  --color-line: rgba(18, 18, 42, 0.14);
  --color-text-on-dark: #F6F4FB;
  --color-text-on-dark-muted: #C8C2DC;

  --rm-bg: #08061A;
  --rm-surface: #0E0B22;

  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;

  /* Spacing scale: 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 120 */
  --space-1: 0.5rem;   /* 8 */
  --space-2: 0.75rem;  /* 12 */
  --space-3: 1rem;     /* 16 */
  --space-4: 1.5rem;   /* 24 */
  --space-5: 2rem;     /* 32 */
  --space-6: 3rem;     /* 48 */
  --space-7: 4rem;     /* 64 */
  --space-8: 5rem;     /* 80 */
  --space-9: 6rem;     /* 96 */
  --space-10: 7.5rem;  /* 120 */

  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-3);
  --space-lg: var(--space-4);
  --space-xl: var(--space-5);
  --space-2xl: var(--space-6);
  --space-section: clamp(6.5rem, 12vw, 9rem);
  --space-section-tight: clamp(4rem, 8vw, 6rem);
  --space-block: clamp(2rem, 3.5vw, 3rem);
  --type-display-tight: -0.055em;
  --type-display-lh: 0.92;
  --glow-yellow: 0 0 48px rgba(187, 82, 145, 0.22);
  --glow-blue: 0 0 60px rgba(139, 70, 211, 0.24);
  --surface-glass: rgba(255, 255, 255, 0.06);
  --surface-glass-border: rgba(255, 255, 255, 0.16);

  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --container-max: 1440px;
  --container-pad: clamp(1.25rem, 4vw, 4.25rem);
  --measure: 62ch;
  --measure-narrow: 42ch;

  --focus-ring: 0 0 0 3px rgba(139, 70, 211, 0.45);

  --motion-fast: 150ms ease;
  --motion-base: 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}