@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-300-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --color-background: #f2f2f2;
  --color-surface: #fff;
  --color-grey: #737373;
  --color-ink: #1c1c1c;
  --color-ink-deep: #161616;
  --color-accent: #fa5b05;
  --color-line: rgb(28 28 28 / 8%);
  --color-line-strong: rgb(28 28 28 / 16%);
  --color-focus: rgb(250 91 5 / 35%);

  --font-primary:
    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-fine:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Compatibility aliases used by deterministic commerce surfaces. */
  --font-display: var(--font-primary);

  --text-h1: 62px;
  --text-h2: 54px;
  --text-h3: 44px;
  --text-h4: 32px;
  --text-body-xl: 24px;
  --text-body-lg: 20px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-display-lg: var(--text-h1);
  --text-body-md: var(--text-body);
  --line-heading: 1;
  --line-body: 1.3;
  --tracking-heading: -0.02em;
  --color-canvas: var(--color-background);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-25: 100px;
  --space-32: 128px;
  --space-40: 160px;
  --space-50: 200px;

  --page-max: 1200px;
  --page-gutter: 80px;
  --content-max: 1040px;
  --reading-max: 760px;
  --header-height: 94px;
  --promo-height: 50px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-focus: 0 0 0 3px var(--color-focus);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-medium: 420ms;
  --duration-reveal: 800ms;
}

@media (max-width: 1199.98px) {
  :root {
    --text-h1: 50px;
    --text-h2: 43px;
    --page-gutter: 15px;
    --content-max: 1170px;
    --header-height: 94px;
  }
}

@media (max-width: 809.98px) {
  :root {
    --text-h1: 40px;
    --text-h2: 35px;
    --text-h3: 30px;
    --text-h4: 26px;
    --text-body-lg: 16px;
    --page-gutter: 12px;
    --header-height: 87px;
  }
}