:root, [data-theme="dark"] {
  color-scheme: dark;
  --page: #101218;
  --surface: #191d26;
  --text: #f4f6fa;
  --muted: #a8b0c0;
  --accent: #8eacff;
  --accent-ink: #acc2ff;
  --on-accent: #101827;
  --line: #303744;
  --field: #77839b;
  --tint: #222d48;
  --danger: #ffb1b8;
}

[data-theme="light"] {
  color-scheme: light;
  --page: #f7f8fa;
  --surface: #ffffff;
  --text: #151820;
  --muted: #515d70;
  --accent: #254ecc;
  --accent-ink: #244cbc;
  --on-accent: #ffffff;
  --line: #d6dce6;
  --field: #778196;
  --tint: #e9eeff;
  --danger: #a21d35;
}

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --motion-quick: 160ms;
  --motion-disclosure: 280ms;
  --motion-entrance: 600ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-distance: 22px;
  --type-display: clamp(3rem, 6.2vw, 5.75rem);
  --type-h1: clamp(2.75rem, 5.5vw, 4.75rem);
  --type-h2: clamp(2rem, 3.8vw, 3.5rem);
  --type-h3: 1.5rem;
  --type-body: 1rem;
  --type-small: 0.875rem;
}