:root {
  color-scheme: dark;
  --bg: #0b1220;
  --surface: #111c2e;
  --surface-2: #18263b;
  --surface-3: #22334c;
  --text: #f3f6fc;
  --muted: #9aabc4;
  --border: rgba(180, 202, 238, .13);
  --primary: #6288ff;
  --primary-2: #8d70ff;
  --success: #47c7a0;
  --danger: #f16b7b;
  --shadow: 0 24px 70px rgba(0,0,0,.24);
  --radius: 20px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fc;
  --surface: #ffffff;
  --surface-2: #edf2fb;
  --surface-3: #e2eafd;
  --text: #18243a;
  --muted: #687790;
  --border: rgba(36, 57, 92, .12);
  --primary: #416be8;
  --primary-2: #7856e8;
  --success: #178b6d;
  --danger: #d94458;
  --shadow: 0 24px 70px rgba(40,60,100,.12);
}