:root {
  --bg: #04070e;
  --surface: #0a1120;
  --surface-2: #101a2c;
  --line: rgba(148, 196, 255, 0.1);
  --text: #f2f5f8;
  --text-muted: #9aa3ae;
  --text-faint: #6a737e;
  --ton: #0098ea;
  --ton-bright: #33b1ff;
  --ton-deep: #007bc0;
  --ton-soft: rgba(0, 152, 234, 0.14);
  --ton-night: #2f54eb;
  --white: #ffffff;

  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Onest', ui-monospace, 'SFMono-Regular', monospace;

  --fs-hero: clamp(1.625rem, 0.6rem + 2.9vw, 3rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  --fs-final: clamp(2rem, 1rem + 3.2vw, 3.75rem);
  --fs-big: clamp(2.75rem, 1.4rem + 5vw, 6rem);
  --fs-num: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);

  --radius-card: 20px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --container: 1280px;
  /* Full-screen sections stop growing past this height. A crawler renders the page in one ~12 000 px tall window
     and never scrolls, so without the cap the hero alone would fill it and nothing below would ever appear. */
  --screen-max: 1400px;
  --gutter: 20px;
  --section-y: clamp(3.5rem, 1.5rem + 5vw, 7rem);
  --nav-h: 64px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-drift: cubic-bezier(0.45, 0, 0.55, 1);
  --z-nav: 50;
  --z-grain: 60;
  --z-skip: 70;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}