:root {
  color-scheme: dark;

  --color-abyss: #071a24;
  --color-deep: #123340;
  --color-signal: #63a8cf;
  --color-signal-strong: #84c7ea;
  --color-accent: #e97816;
  --color-ice: #eaf1f4;
  --color-mist: #9bb2bd;
  --color-muted: #718c98;
  --color-line: #274854;
  --color-line-strong: #41636f;

  --font-sans: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --text-display: clamp(3.25rem, 8.4vw, 6rem);
  --text-h2: clamp(2.35rem, 5.4vw, 4.75rem);
  --text-h3: clamp(1.45rem, 2.5vw, 2rem);
  --text-lead: clamp(1.05rem, 1.7vw, 1.3rem);
  --text-body: 1rem;
  --text-small: 0.8125rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --container: 80rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-height: 5rem;

  --radius-small: 0.5rem;
  --radius-medium: 0.75rem;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
}

@supports (color: oklch(50% 0.1 200)) {
  :root {
    --color-abyss: oklch(19% 0.035 224);
    --color-deep: oklch(30% 0.045 218);
    --color-signal: oklch(71% 0.095 225);
    --color-signal-strong: oklch(80% 0.09 225);
    --color-accent: oklch(68% 0.18 52);
    --color-ice: oklch(95% 0.012 220);
    --color-mist: oklch(75% 0.035 220);
    --color-muted: oklch(63% 0.038 220);
    --color-line: oklch(36% 0.04 218);
    --color-line-strong: oklch(47% 0.04 218);
  }
}