:root {
  color-scheme: dark;
  --color-bg: #090a13;
  --color-surface: #11131e;
  --color-surface-raised: #151722;
  --color-surface-soft: #0b0d16;
  --color-text: #f5f3f8;
  --color-muted: #999cad;
  --color-line: #292c3d;
  --color-primary: #8b5cf6;
  --color-primary-strong: #6d28d9;
  --color-primary-soft: #8b5cf619;
  --color-success: #4ade80;
  --color-danger: #f87171;
  --color-warning: #f5ca78;
  --shadow-card: 0 25px 70px #0007;
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --page-width: 1180px;
}

html[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f4f3f8;
  --color-surface: #ffffff;
  --color-surface-raised: #faf9fc;
  --color-surface-soft: #f0eef5;
  --color-text: #1d1a25;
  --color-muted: #6f6979;
  --color-line: #ded9e7;
  --color-primary: #7c3aed;
  --color-primary-strong: #6d28d9;
  --color-primary-soft: #7c3aed14;
  --shadow-card: 0 22px 60px #3125411f;
}