:root {
  color-scheme: dark;

  --color-bg: #0b0d10;
  --color-bg-elevated: #14171d;
  --color-surface: #1b1f26;
  --color-surface-2: #20252d;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-text: #f4f2ed;
  --color-text-muted: #a6acb6;
  --color-text-faint: #767d88;
  --color-accent: #de0a12;
  --color-accent-ink: #ffffff;
  --color-accent-soft: rgba(222, 10, 18, 0.16);
  --color-accent-text: #f04e54;
  --shadow-tint: 220 30% 2%;
  --scrim-strong: rgba(9, 10, 12, 0.72);
  --scrim-soft: rgba(9, 10, 12, 0.4);

  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --space-section: clamp(4rem, 7vw, 7rem);
  --space-section-tight: clamp(2.5rem, 5vw, 4rem);
  --container-w: min(1360px, 100% - 2.5rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-med: 0.32s;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --color-bg: #f5f6f7;
    --color-bg-elevated: #ffffff;
    --color-surface: #ffffff;
    --color-surface-2: #eef0f2;
    --color-border: rgba(10, 14, 20, 0.1);
    --color-border-strong: rgba(10, 14, 20, 0.2);
    --color-text: #14171c;
    --color-text-muted: #4b535c;
    --color-text-faint: #6b7480;
    --color-accent-soft: rgba(222, 10, 18, 0.12);
    --color-accent-text: #de0a12;
    --shadow-tint: 220 20% 45%;
    --scrim-strong: rgba(8, 9, 11, 0.66);
    --scrim-soft: rgba(8, 9, 11, 0.32);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --color-bg: #0b0d10;
  --color-bg-elevated: #14171d;
  --color-surface: #1b1f26;
  --color-surface-2: #20252d;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-text: #f4f2ed;
  --color-text-muted: #a6acb6;
  --color-text-faint: #767d88;
  --color-accent-soft: rgba(222, 10, 18, 0.16);
  --color-accent-text: #f04e54;
  --shadow-tint: 220 30% 2%;
  --scrim-strong: rgba(9, 10, 12, 0.72);
  --scrim-soft: rgba(9, 10, 12, 0.4);
}

:root[data-theme='light'] {
  color-scheme: light;
  --color-bg: #f5f6f7;
  --color-bg-elevated: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #eef0f2;
  --color-border: rgba(10, 14, 20, 0.1);
  --color-border-strong: rgba(10, 14, 20, 0.2);
  --color-text: #14171c;
  --color-text-muted: #4b535c;
  --color-text-faint: #6b7480;
  --color-accent-soft: rgba(222, 10, 18, 0.12);
  --color-accent-text: #de0a12;
  --shadow-tint: 220 20% 45%;
  --scrim-strong: rgba(8, 9, 11, 0.66);
  --scrim-soft: rgba(8, 9, 11, 0.32);
}