:root {
  color-scheme: light;
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-2: #f8fafe;
  --surface-3: #edf2f8;
  --text: #162033;
  --muted: #64748b;
  --border: #dce4ef;
  --border-strong: #cbd6e5;
  --brand: #635bdb;
  --brand-strong: #4f46c7;
  --brand-soft: #eeedff;
  --success: #087b65;
  --success-soft: #e2f7f1;
  --info: #256fb8;
  --info-soft: #e8f3ff;
  --warning: #9a5b05;
  --warning-soft: #fff3dc;
  --danger: #bc3850;
  --danger-soft: #ffe9ed;
  --shadow-sm: 0 1px 3px rgb(25 42 70 / 7%);
  --shadow-md: 0 14px 38px rgb(25 42 70 / 11%);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --focus: 0 0 0 3px rgb(99 91 219 / 22%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1020;
  --surface: #121a2d;
  --surface-2: #172137;
  --surface-3: #202b43;
  --text: #edf1fb;
  --muted: #9ca8bd;
  --border: #28344d;
  --border-strong: #36445f;
  --brand: #9b87ff;
  --brand-strong: #b1a2ff;
  --brand-soft: #2a244d;
  --success: #50d2b6;
  --success-soft: #153b36;
  --info: #6db8ff;
  --info-soft: #173451;
  --warning: #ffc76e;
  --warning-soft: #48371b;
  --danger: #ff8293;
  --danger-soft: #4b2330;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 20%);
  --shadow-md: 0 16px 40px rgb(0 0 0 / 24%);
}