:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #f8f9ff;
  --bg-secondary: #f1f3ff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-overlay: rgb(255 255 255 / 94%);
  --surface-aside-start: rgb(255 255 255 / 76%);
  --surface-aside-end: rgb(238 236 255 / 90%);
  --text-primary: #111827;
  --text-secondary: #667085;
  --text-on-primary: #ffffff;
  --text-disabled: #98a2b3;
  --border: #dfe3f4;
  --border-translucent: rgb(223 227 244 / 90%);
  --border-hover: #b8bde0;
  --control-border: #858da3;
  --control-border-hover: #6f7890;
  --primary: #634ff6;
  --primary-hover: #5140db;
  --primary-gradient-end: #7658ef;
  --brand-gradient-end: #7658ef;
  --primary-atmosphere: rgb(99 79 246 / 13%);
  --primary-focus: #8272f8;
  --primary-focus-soft: rgb(99 79 246 / 14%);
  --accent: #bd2e72;
  --accent-atmosphere: rgb(236 73 153 / 10%);
  --accent-aside: rgb(236 73 153 / 12%);
  --brand-violet: #5546ff;
  --brand-violet-on: #ffffff;
  --brand-ocean: #075fca;
  --brand-ocean-on: #ffffff;
  --brand-teal: #00796b;
  --brand-teal-on: #ffffff;
  --brand-rose: #a61b50;
  --brand-rose-on: #ffffff;
  --brand-lavender: #ddd6fe;
  --brand-lavender-on: #111827;
  --brand-powder: #bae6fd;
  --brand-powder-on: #111827;
  --brand-mint: #bbf7d0;
  --brand-mint-on: #111827;
  --brand-lagoon: #036b78;
  --brand-lagoon-on: #ffffff;
  --brand-deep_sea: #164e63;
  --brand-deep_sea-on: #ffffff;
  --brand-amber: #fbbf24;
  --brand-amber-on: #111827;
  --brand-sunset: #c2410c;
  --brand-sunset-on: #ffffff;
  --brand-coral: #be123c;
  --brand-coral-on: #ffffff;
  --brand-forest: #166534;
  --brand-forest-on: #ffffff;
  --brand-sage: #d9f99d;
  --brand-sage-on: #111827;
  --brand-olive: #4d5d16;
  --brand-olive-on: #ffffff;
  --brand-indigo: #4338ca;
  --brand-indigo-on: #ffffff;
  --brand-electric: #1d4ed8;
  --brand-electric-on: #ffffff;
  --brand-graphite: #334155;
  --brand-graphite-on: #ffffff;
  --success: #067a57;
  --warning: #925600;
  --danger: #b42318;
  --surface-disabled: #f2f4f7;
  --overlay-backdrop: rgb(17 24 39 / 54%);
  --shadow: 0 24px 70px rgb(69 61 143 / 14%);
  --shadow-primary: 0 10px 24px rgb(99 79 246 / 24%);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #0d1222;
  --bg-secondary: #151b31;
  --surface: #171d31;
  --surface-raised: #1d243b;
  --surface-overlay: rgb(23 29 49 / 96%);
  --surface-aside-start: rgb(29 36 59 / 92%);
  --surface-aside-end: rgb(25 29 53 / 96%);
  --text-primary: #f7f8ff;
  --text-secondary: #aeb6d0;
  --text-on-primary: #171d31;
  --text-disabled: #747d9b;
  --border: #667085;
  --border-translucent: rgb(102 112 133 / 90%);
  --border-hover: #98a2b3;
  --control-border: #667085;
  --control-border-hover: #98a2b3;
  --primary: #927fff;
  --primary-hover: #a193ff;
  --primary-gradient-end: #b15ff8;
  --brand-gradient-end: #b15ff8;
  --primary-atmosphere: rgb(141 123 255 / 16%);
  --primary-focus: #7568d6;
  --primary-focus-soft: rgb(141 123 255 / 20%);
  --accent: #ff6b9d;
  --accent-atmosphere: rgb(255 107 157 / 10%);
  --accent-aside: rgb(255 107 157 / 12%);
  --brand-violet: #a78bfa;
  --brand-violet-on: #111827;
  --brand-ocean: #60a5fa;
  --brand-ocean-on: #111827;
  --brand-teal: #5eead4;
  --brand-teal-on: #111827;
  --brand-rose: #fb7185;
  --brand-rose-on: #111827;
  --brand-lavender: #c4b5fd;
  --brand-lavender-on: #111827;
  --brand-powder: #7dd3fc;
  --brand-powder-on: #111827;
  --brand-mint: #86efac;
  --brand-mint-on: #111827;
  --brand-lagoon: #67e8f9;
  --brand-lagoon-on: #111827;
  --brand-deep_sea: #93c5fd;
  --brand-deep_sea-on: #111827;
  --brand-amber: #fcd34d;
  --brand-amber-on: #111827;
  --brand-sunset: #fb923c;
  --brand-sunset-on: #111827;
  --brand-coral: #fda4af;
  --brand-coral-on: #111827;
  --brand-forest: #6ee7b7;
  --brand-forest-on: #111827;
  --brand-sage: #d9f99d;
  --brand-sage-on: #111827;
  --brand-olive: #bef264;
  --brand-olive-on: #111827;
  --brand-indigo: #a5b4fc;
  --brand-indigo-on: #111827;
  --brand-electric: #38bdf8;
  --brand-electric-on: #111827;
  --brand-graphite: #cbd5e1;
  --brand-graphite-on: #111827;
  --success: #34d399;
  --warning: #f7b84b;
  --danger: #ff746c;
  --surface-disabled: #242b42;
  --overlay-backdrop: rgb(0 0 0 / 68%);
  --shadow: 0 24px 70px rgb(0 0 0 / 38%);
  --shadow-primary: 0 10px 24px rgb(141 123 255 / 28%);
}