:root {
  color-scheme: dark;
  --color-background: #0a0a0b;
  --color-background-secondary: #0e0e10;
  --color-surface: #161618;
  --color-card: #1a1a1d;
  --color-border: #2c2c30;
  --color-primary: #e50615;
  --color-primary-hover: #c60512;
  --color-white: #ffffff;
  --color-steel: #a1a1aa;
  --font-heading: 'Chakra Petch', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  --radius: 4px;
  --container-width: 1600px;
  --page-gutter: clamp(24px, 4.4vw, 80px);
  --header-height: 80px;
  --transition: 220ms ease;
  /* The hero isolates its media layers; navigation and skip link sit above it. */
  --layer-header: 10;
  --layer-skip: 20;
}