:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --page: #09090f;
  --page-alt: #12121d;
  --surface: rgb(20 19 31 / 72%);
  --surface-strong: rgb(20 19 31 / 91%);
  --surface-hover: rgb(255 255 255 / 5%);
  --text: #f5f3ff;
  --muted: #a1a1aa;
  --subtle: #777583;
  --purple: #8b5cf6;
  --violet: #a78bfa;
  --accent: #c084fc;
  --accent-soft: rgb(167 139 250 / 11%);
  --border: rgb(167 139 250 / 17%);
  --border-hover: rgb(192 132 252 / 42%);
  --glow: rgb(139 92 246 / 20%);
  --shadow: 0 24px 70px rgb(0 0 0 / 30%);
  --content-width: 1080px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
  --page: #f3f0fa;
  --page-alt: #eae5f5;
  --surface: rgb(255 255 255 / 68%);
  --surface-strong: rgb(255 255 255 / 91%);
  --surface-hover: rgb(113 69 199 / 5%);
  --text: #211a2d;
  --muted: #625a70;
  --subtle: #817990;
  --purple: #7145c7;
  --violet: #805bd1;
  --accent: #8b48c9;
  --accent-soft: rgb(113 69 199 / 9%);
  --border: rgb(87 57 133 / 15%);
  --border-hover: rgb(113 69 199 / 37%);
  --glow: rgb(139 92 246 / 13%);
  --shadow: 0 24px 70px rgb(55 36 83 / 11%);
}

body {
  overflow-x: clip;
  background:
    radial-gradient(ellipse at 48% -15%, rgb(94 50 163 / 19%), transparent 48%),
    radial-gradient(ellipse at 100% 70%, rgb(46 83 126 / 10%), transparent 40%),
    var(--page);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  transition: background-color 240ms ease, color 240ms ease;
}