:root {
  color-scheme: dark;
  --night: #0a0a12;
  --night-deep: #07070d;
  --paper: #f6f6fa;
  --ink-100: #ececf3;
  --ink-200: #d6d6e2;
  --ink-300: #b4b4c8;
  --ink-400: #8a8aa3;
  --ink-500: #5c5c74;
  --ink-700: #2a2a3c;
  --ink-800: #1b1b2a;
  --ink-900: #12121e;
  --violet-300: #b3a2ff;
  --violet-400: #9a83ff;
  --violet-500: #7c5cff;
  --violet-600: #6440f5;
  --violet-700: #4f2fd6;
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-600: #0891b2;

  --bg: var(--night);
  --bg-deep: var(--night-deep);
  --surface: var(--ink-900);
  --surface-raised: var(--ink-800);
  --surface-high: var(--ink-700);
  --text: var(--paper);
  --text-soft: var(--ink-300);
  --text-faint: var(--ink-400);
  --line: rgb(246 246 250 / 11%);
  --line-strong: rgb(246 246 250 / 22%);
  --violet: var(--violet-500);
  --violet-text: var(--violet-300);
  --cyan: var(--cyan-400);
  --button-bg: var(--violet-500);
  --button-text: var(--night);
  --shadow-xl: 0 2rem 7rem rgb(0 0 0 / 40%);
  --shadow-card: 0 1.5rem 4rem rgb(0 0 0 / 28%);
  --radius-sm: 0.75rem;
  --radius: 1.25rem;
  --radius-lg: 1.9rem;
  --radius-xl: 2.6rem;
  --radius-pill: 999px;
  --font-display: "Space Grotesk", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --max-width: 76rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --product: var(--violet);
  --product-soft: rgb(124 92 255 / 18%);
  --product-ink: var(--violet-300);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: var(--paper);
  --bg-deep: #fff;
  --surface: var(--ink-100);
  --surface-raised: #fff;
  --surface-high: var(--ink-200);
  --text: var(--night);
  --text-soft: var(--ink-500);
  --text-faint: #706d82;
  --line: rgb(10 10 18 / 12%);
  --line-strong: rgb(10 10 18 / 24%);
  --violet: var(--violet-600);
  --violet-text: var(--violet-700);
  --cyan: var(--cyan-600);
  --button-bg: var(--violet-600);
  --button-text: #fff;
  --shadow-xl: 0 2rem 7rem rgb(10 10 18 / 13%);
  --shadow-card: 0 1.5rem 4rem rgb(10 10 18 / 12%);
}