:root {
  --primary: rgb(95 66 231);
  --accent: #e91e63;
  --accent-soft: #fce7f3;
  --bg-main: #f8fafc;
  --bg-surface: #ffffff;
  --bg-soft: #eef2f7;
  --text-main: #0f172a;
  --text-soft: #334155;
  --text-muted: #64748b;
  --surface-border: rgb(15 23 42 / 0.12);
  --surface-border-strong: rgb(15 23 42 / 0.18);
  --surface-hover: rgb(15 23 42 / 0.04);
  --surface-hover-strong: rgb(15 23 42 / 0.08);
  --control-bg: rgb(15 23 42 / 0.08);
  --control-border: rgb(15 23 42 / 0.16);
  --success: #10b981;
  --error: #ef4444;
  --warning: #f59e0b;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --brand-solid: rgb(95 66 231);
  --brand-on: #ffffff;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: rgb(95 66 231);
    --accent: #f472b6;
    --accent-soft: #3f1d35;
    --bg-main: rgb(10 10 10);
    --bg-surface: rgb(20 20 20);
    --bg-soft: rgb(28 28 28);
    --text-main: #e5e7eb;
    --text-soft: #cbd5e1;
    --text-muted: #94a3b8;
    --surface-border: rgb(255 255 255 / 0.08);
    --surface-border-strong: rgb(255 255 255 / 0.14);
    --surface-hover: rgb(255 255 255 / 0.06);
    --surface-hover-strong: rgb(255 255 255 / 0.1);
    --control-bg: rgb(255 255 255 / 0.15);
    --control-border: rgb(255 255 255 / 0.22);
    --success: #34d399;
    --error: #f87171;
    --warning: #fbbf24;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --brand-solid: rgb(95 66 231);
    --brand-on: #ffffff;
  }
}