:root {
  --surface: #0e0e0e;
  --surface-low: #131313;
  --surface-mid: #1a1a1a;
  --surface-high: #20201f;
  --surface-highest: #262626;
  --surface-bright: #2c2c2c;

  --primary: #c799ff;
  --primary-container: #bc87fe;
  --on-primary: #440080;
  --secondary: #4af8e3;
  --on-secondary: #005b51;
  --secondary-container: #006a60;
  --on-secondary-container: #dcfff8;
  --tertiary: #ffa44c;
  --on-tertiary: #552d00;
  --error: #ff6e84;
  --error-container: #a70138;
  --on-error-container: #ffb2b9;

  --text: #ffffff;
  --text-muted: #adaaaa;
  --outline: #767575;
  --outline-variant: #484847;

  --font-headline: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  --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;

  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  --shadow-glow: 0 32px 64px -4px rgba(68, 0, 128, 0.18);

  --nav-height: 4rem;
  --sidebar-width: 16rem;
  --page-max: 80rem;
}