:root {
  /* ── Primary ── */
  --color-primary: #ff7cf5;
  --color-primary-dim: #ff51fa;
  --color-primary-container: #ff5af9;
  --color-primary-fixed: #ff5af9;
  --color-primary-fixed-dim: #ff1cfe;
  --color-on-primary: #580058;
  --color-on-primary-fixed: #000000;
  --color-on-primary-fixed-variant: #540054;
  --color-on-primary-container: #440044;
  --color-inverse-primary: #aa00aa;

  /* ── Secondary ── */
  --color-secondary: #00eefc;
  --color-secondary-dim: #00deec;
  --color-secondary-fixed: #00eefc;
  --color-secondary-fixed-dim: #00deec;
  --color-secondary-container: #006970;
  --color-on-secondary: #005359;
  --color-on-secondary-fixed: #003f43;
  --color-on-secondary-fixed-variant: #005e64;
  --color-on-secondary-container: #e3fdff;

  /* ── Tertiary ── */
  --color-tertiary: #ac89ff;
  --color-tertiary-dim: #874cff;
  --color-tertiary-fixed: #bda1ff;
  --color-tertiary-fixed-dim: #b190ff;
  --color-tertiary-container: #7000ff;
  --color-on-tertiary: #290067;
  --color-on-tertiary-fixed: #1f0052;
  --color-on-tertiary-fixed-variant: #4700a7;
  --color-on-tertiary-container: #f8f1ff;

  /* ── Error ── */
  --color-error: #ff6e84;
  --color-error-dim: #d73357;
  --color-error-container: #a70138;
  --color-on-error: #490013;
  --color-on-error-container: #ffb2b9;

  /* ── Surfaces ── */
  --color-background: #140727;
  --color-surface: #140727;
  --color-surface-dim: #140727;
  --color-surface-bright: #352254;
  --color-surface-variant: #2e1c4b;
  --color-surface-tint: #ff7cf5;
  --color-surface-container-lowest: #000000;
  --color-surface-container-low: #190b30;
  --color-surface-container: #201139;
  --color-surface-container-high: #271641;
  --color-surface-container-highest: #2e1c4b;

  /* ── On-surface ── */
  --color-on-background: #eee0ff;
  --color-on-surface: #eee0ff;
  --color-on-surface-variant: #b5a4cd;

  /* ── Outline ── */
  --color-outline: #7e6f95;
  --color-outline-variant: #4f4165;

  /* ── Inverse ── */
  --color-inverse-surface: #fef7ff;
  --color-inverse-on-surface: #5d4e73;

  /* ── Typography ── */
  --font-headline: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-label: 'Space Grotesk', system-ui, sans-serif;

  /* ── Type scale ── */
  --text-display-lg: 3.5rem;
  --text-display-md: 2.75rem;
  --text-headline-lg: 2rem;
  --text-headline-md: 1.75rem;
  --text-headline-sm: 1.5rem;
  --text-title-lg: 1.375rem;
  --text-title-md: 1rem;
  --text-body-lg: 1.125rem;
  --text-body-md: 0.875rem;
  --text-body-sm: 0.75rem;
  --text-label-lg: 0.875rem;
  --text-label-md: 0.75rem;
  --text-label-sm: 0.6875rem;

  /* ── Spacing ── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Radii ── */
  --radius-sm: 0.125rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.5rem;
  --radius-full: 0.75rem;

  /* ── Layout ── */
  --max-width: 1440px;
  --gutter: 3rem;
}

@media (max-width: 768px) {
  :root {
    --gutter: 1.5rem;
  }
}