@font-face {
  font-family: "Funnel Display";
  src: url("../fonts/funnel-display.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Funnel Sans";
  src: url("../fonts/funnel-sans.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --abyss: #050e18;
  --deep: #0a1c2d;
  --tide: #10283f;
  --current: #12364f;
  --dusk: #1d2a52;
  --ink: #eef4f7;
  --ink-soft: #a3b8c7;
  --ink-dark: #071321;
  --sun-top: #ffb46a;
  --sun-low: #ff6b3d;
  --sea-top: #63c2f2;
  --sea-low: #2f7fd3;
  --sun: linear-gradient(180deg, var(--sun-top), var(--sun-low));
  --sea: linear-gradient(180deg, var(--sea-top), var(--sea-low));
  --logo-soft: var(--ink-soft);

  --font-display: "Funnel Display", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Funnel Sans", ui-sans-serif, system-ui, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.08rem + 0.6vw, 1.55rem);
  --step-2: clamp(1.7rem, 1.35rem + 1.6vw, 2.75rem);
  --step-3: clamp(2.4rem, 1.6rem + 3.6vw, 4.75rem);
  --step-4: clamp(3.1rem, 1.7rem + 6.4vw, 8rem);

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 1240px;
  --header: 72px;
  --radius: clamp(20px, 2.4vw, 32px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --intro: 1.4s;
}

@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}