:root {
  --color-background: #f3f5fa;
  --color-surface: #ffffff;
  --color-surface-raised: #eef1f8;
  --color-text: #1c2333;
  --color-muted: #5e6b80;
  --color-border: #d0d7e3;
  --color-primary: #7347c8;
  --color-primary-strong: #5d35a8;
  --color-primary-foreground: #ffffff;
  --color-secondary: #0284c7;
  --color-accent: #7c3aed;
  --color-success: #178a54;
  --color-warning: #c47d08;
  --color-error: #d44545;
  --color-glow-purple: rgba(115, 71, 200, 0.22);
  --color-glow-cyan: rgba(14, 165, 233, 0.16);
  --color-phone-bezel: #e7ebf3;
  --skeleton-base: #e4e8f0;
  --skeleton-shine: #f7f8fc;
  color-scheme: light;
}

html.dark {
  --color-background: #0d1117;
  --color-surface: #11161e;
  --color-surface-raised: #171d27;
  --color-text: #f8fafc;
  --color-muted: #8b97a8;
  --color-border: #3a4a5e;
  --color-primary: #7347c8;
  --color-primary-strong: #8b63db;
  --color-primary-foreground: #ffffff;
  --color-secondary: #0ea5e9;
  --color-accent: #bb86fc;
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-error: #f87171;
  --color-glow-purple: rgba(115, 71, 200, 0.38);
  --color-glow-cyan: rgba(14, 165, 233, 0.22);
  --color-phone-bezel: #0a0d12;
  --skeleton-base: #1a2230;
  --skeleton-shine: #2a3444;
  color-scheme: dark;
}

html,
body {
  background-color: var(--color-background);
  color: var(--color-text);
}