:root {
  color-scheme: dark;
  --color-bg: #050509;
  --color-surface: #100C1B;
  --color-raised: #1C142E;
  --color-accent: #F5C451;
  --color-accent-hover: #FFD677;
  --color-purple: #7C3AED;
  --color-secondary: #B79AFF;
  --color-cyan: #28DBF4;
  --color-magenta: #F04CCB;
  --color-text: #F5F3FF;
  --color-muted: #BDB6CE;
  --color-subtle: #92899F;
  --color-border: #392E4B;
  --color-control-border: #79658F;
  --color-focus: #28DBF4;
  --color-positive: #7DE6A9;
  --color-warning: #FFD677;
  --color-negative: #FFA8B8;
  --color-info: #8FE8F7;
  --radius-small: 8px;
  --radius-card: 24px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --duration-fast: 160ms;
  --duration-normal: 240ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --shadow-accent: 0 8px 32px #F5C45118;
}