:root {
  color-scheme: light dark;

  /* Accent palette */
  --blue: #3b82f6;
  --bg-blue: #3b82f61a;
  --green: #10b981;
  --bg-green: #10b9811a;
  --terracotta: #b45309;
  --bg-terracotta: #b453091a;
  --gold: #f59e0b;
  --bg-gold: #f59e0b1a;
  --purple: #8b5cf6;
  --bg-purple: #8b5cf61a;
  --pink: #ec4899;
  --bg-pink: #ec48991a;
  --slate: #475569;
  --bg-slate: #4755691a;
  --gray: #64748b;
  --bg-gray: #64748b1a;
  --orange: #f97316;
  --bg-orange: #f973161a;
  --main: #973773;
  --main-bg: #9737731a;

  /* Semantic tokens (light) */
  --brand: #4C49C9;
  --bg: #FAF4FF;
  --surface: #FFFFFF;
  --surface-2: #F5EEFF;
  --surface-3: #EDE4FF;
  --text: #312950;
  --text-muted: #5F5680;
  --ink-70: rgba(49, 41, 80, 0.7);
  --on-ink: #FAF4FF;
  --on-brand: #FFFFFF;
  --border: rgba(49, 41, 80, 0.15);
  --border-strong: rgba(49, 41, 80, 0.25);
  --elevation-1: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  --input-bg: var(--surface);
  --input-text: var(--text);
  --input-placeholder: rgba(49, 41, 80, 0.55);
  --danger: #FF4A4A;
  --danger-bg: rgba(253, 74, 74, 0.06);

  /* Radii */
  --radius-xs: 0.65rem;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 100vmax;
  --radius-circle: 50%;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  /* Motion */
  --transition-fast: 160ms ease;
  --transition-base: 180ms ease;
  --transition-slow: 220ms ease;

  /* Elevation */
  --shadow-fab: 0 12px 24px rgba(0, 0, 0, 0.3);
  --shadow-popover: 0 18px 40px color-mix(in srgb, var(--text) 16%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0a12;
    --surface: #131124;
    --surface-2: #1a1633;
    --surface-3: #0f0d1e;
    --text: #F4F1FF;
    --text-muted: rgba(244, 241, 255, 0.72);
    --ink-70: rgba(244, 241, 255, 0.7);
    --on-ink: #0b0a12;
    --border: rgba(244, 241, 255, 0.14);
    --border-strong: rgba(244, 241, 255, 0.22);
    --elevation-1: 0 0 0 1px rgba(244, 241, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.35);
    --input-bg: #0f0d1e;
    --input-text: var(--text);
    --input-placeholder: rgba(244, 241, 255, 0.55);
    --danger-bg: rgba(255, 74, 74, 0.12);

    /* Existing accent backgrounds need a bit more presence in dark */
    --main-bg: rgba(151, 55, 115, 0.22);
  }
}