:root {
  --violet-300: #B38DF8;
  --violet-500: #752EE8;
  --violet-600: #6527D8;
  --violet-700: #5A1FC2;
  --violet-800: #4C18A9;
  --blue-500: #204AE5;
  --steel-500: #3F629E;
  --teal-400: #1ED2A5;
  --teal-800: #0F7F63;
  --amber-400: #E3B45F;
  --amber-800: #8C6410;
  --terra-400: #E8836F;
  --terra-800: #A93E29;
  --sky-400: #7C9CE0;
  --sky-800: #2D4E9E;

  --night-950: #09090C;
  --night-900: #0E0E14;
  --night-850: #15151C;
  --night-800: #1C1C25;
  --night-750: #24242F;
  --night-700: #2C2A38;
  --mist-100: #E9EAEC;
  --mist-300: #A7ACB3;
  --mist-500: #787D85;

  --snow-0: #FFFFFF;
  --snow-50: #FBFAFD;
  --snow-100: #F2F1F7;
  --snow-150: #F5F4FA;
  --snow-200: #EBE9F3;
  --snow-300: #D5D2E2;
  --coal-900: #17161C;
  --coal-700: #51535E;
  --coal-600: #6B6E7A;

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-19: 76px;
  --space-26: 104px;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-md: 15px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-h3: 1.16rem;
  --text-h2: clamp(1.85rem, 3.2vw, 2.65rem);
  --text-h1: clamp(2.5rem, 5.4vw, 4.1rem);
  --tracking-h1: -0.032em;
  --tracking-h2: -0.028em;
  --tracking-h3: -0.014em;
  --tracking-body: -0.003em;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur: 0.22s;
}

:root,
:root[data-theme="dark"] {
  --bg: var(--night-950);
  --bg-2: var(--night-900);
  --panel: var(--night-850);
  --panel-2: var(--night-800);
  --panel-3: var(--night-750);
  --edge: rgb(255 255 255 / 0.07);
  --edge-2: rgb(255 255 255 / 0.13);

  --ink: var(--mist-100);
  --dim: var(--mist-300);
  --faint: var(--mist-500);

  --accent: var(--violet-500);
  --accent-hover: var(--violet-600);
  --accent-ink: var(--violet-300);
  --on-accent: var(--snow-0);
  --accent-soft: rgb(117 46 232 / 0.16);
  --accent-line: rgb(117 46 232 / 0.38);

  --ok: var(--teal-400);
  --ok-soft: rgb(30 210 165 / 0.12);
  --amber: var(--amber-400);
  --amber-soft: rgb(227 180 95 / 0.12);
  --danger: var(--terra-400);
  --danger-soft: rgb(232 131 111 / 0.12);
  --info: var(--sky-400);
  --info-soft: rgb(124 156 224 / 0.12);

  --aura-1: rgb(117 46 232 / 0.5);
  --aura-2: rgb(101 39 216 / 0.44);
  --aura-3: rgb(32 74 229 / 0.46);
  --aura-4: rgb(30 210 165 / 0.26);
  --aura-smoke: rgb(40 42 58 / 0.5);
  --aura-fade: rgb(9 9 12 / 0.82);

  --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.35);
  --shadow: 0 12px 34px rgb(0 0 0 / 0.48);
  --shadow-lg: 0 34px 80px rgb(0 0 0 / 0.6);
  --scroll: var(--night-700);
  --chart: var(--violet-300);
  --chart-hover: var(--teal-400);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: var(--snow-50);
  --bg-2: var(--snow-100);
  --panel: var(--snow-0);
  --panel-2: var(--snow-150);
  --panel-3: var(--snow-200);
  --edge: rgb(24 20 34 / 0.09);
  --edge-2: rgb(24 20 34 / 0.16);

  --ink: var(--coal-900);
  --dim: var(--coal-700);
  --faint: var(--coal-600);

  --accent: var(--violet-700);
  --accent-hover: var(--violet-800);
  --accent-ink: var(--violet-800);
  --on-accent: var(--snow-0);
  --accent-soft: rgb(90 31 194 / 0.08);
  --accent-line: rgb(90 31 194 / 0.24);

  --ok: var(--teal-800);
  --ok-soft: rgb(15 127 99 / 0.1);
  --amber: var(--amber-800);
  --amber-soft: rgb(140 100 16 / 0.1);
  --danger: var(--terra-800);
  --danger-soft: rgb(169 62 41 / 0.08);
  --info: var(--sky-800);
  --info-soft: rgb(45 78 158 / 0.08);

  --aura-1: rgb(126 58 235 / 0.34);
  --aura-2: rgb(101 39 216 / 0.26);
  --aura-3: rgb(48 92 236 / 0.28);
  --aura-4: rgb(30 190 152 / 0.2);
  --aura-smoke: rgb(226 224 236 / 0.7);
  --aura-fade: rgb(251 250 253 / 0.9);

  --shadow-sm: 0 1px 4px rgb(40 34 26 / 0.07);
  --shadow: 0 10px 28px rgb(40 34 26 / 0.09);
  --shadow-lg: 0 28px 64px rgb(40 34 26 / 0.12);
  --scroll: var(--snow-300);
  --chart: var(--violet-700);
  --chart-hover: var(--teal-800);

  color-scheme: light;
}