:root {
  --brand-50: #f5f3ff;
  --brand-100: #ede9fe;
  --brand-200: #ddd6fe;
  --brand-300: #c4b5fd;
  --brand-400: #a78bfa;
  --brand-500: #8b5cf6;
  --brand-600: #7c3aed;
  --brand-700: #6d28d9;
  --brand-800: #5b21b6;
  --brand-900: #4c1d95;
  --brand-950: #2e1065;

  --bg: #ffffff;
  --bg-elevated: #faf8ff;
  --surface: #ffffff;
  --fg: #1a1523;
  --fg-muted: #6b6478;
  --border: #e9e4f5;
  --primary: var(--brand-600);
  --primary-fg: #ffffff;
  --ring: var(--brand-500);

  --danger: #dc2626;
  --danger-fg: #ffffff;
  --success: #15803d;
  --warning: #b45309;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgb(76 29 149 / 0.06), 0 1px 3px rgb(76 29 149 / 0.08);
  --shadow-md: 0 4px 12px -2px rgb(76 29 149 / 0.1), 0 2px 6px -2px rgb(76 29 149 / 0.08);
  --shadow-lg: 0 18px 40px -12px rgb(76 29 149 / 0.22), 0 6px 16px -8px rgb(76 29 149 / 0.12);

  --glass: rgb(255 255 255 / 0.72);
  --glass-border: rgb(124 58 237 / 0.12);
  --gradient-brand: linear-gradient(135deg, var(--brand-600) 0%, #9333ea 55%, #c026d3 100%);
  --gradient-soft:
    radial-gradient(1200px 600px at 10% -10%, rgb(139 92 246 / 0.12), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgb(192 38 211 / 0.08), transparent 60%);
  --blob-a: rgb(139 92 246 / 0.28);
  --blob-b: rgb(192 38 211 / 0.18);
  --pattern-dot: rgb(124 58 237 / 0.1);
}

.dark {
  --bg: #15131a;
  --bg-elevated: #1c1922;
  --surface: #221e2b;
  --fg: #f3f0fa;
  --fg-muted: #a49db5;
  --border: #2f2a3a;
  --primary: var(--brand-400);
  --primary-fg: #15131a;

  --danger: #f87171;
  --danger-fg: #15131a;
  --success: #4ade80;
  --warning: #fbbf24;

  --shadow-sm: 0 0 0 1px rgb(255 255 255 / 0.04);
  --shadow-md: 0 0 0 1px rgb(255 255 255 / 0.05), 0 8px 24px -12px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 0 0 1px rgb(255 255 255 / 0.06), 0 24px 48px -16px rgb(0 0 0 / 0.7);

  --gradient-brand: linear-gradient(
    135deg,
    var(--brand-300) 0%,
    var(--brand-400) 50%,
    #e879f9 100%
  );
  --glass: rgb(28 25 34 / 0.68);
  --glass-border: rgb(255 255 255 / 0.08);
  --gradient-soft:
    radial-gradient(1200px 600px at 10% -10%, rgb(139 92 246 / 0.16), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgb(192 38 211 / 0.1), transparent 60%);
  --blob-a: rgb(139 92 246 / 0.22);
  --blob-b: rgb(192 38 211 / 0.12);
  --pattern-dot: rgb(255 255 255 / 0.05);
}