:root {
  color-scheme: light;

  --color-canvas: #ece3de;
  --color-surface: #f4f2ef;
  --color-text: #373635;
  --color-brand: #0d3840;
  --color-line: rgba(55, 54, 53, 0.5);
  --color-line-soft: rgba(55, 54, 53, 0.22);
  --color-muted: rgba(55, 54, 53, 0.68);
  --color-on-brand: #f4f2ef;
  --color-error: #8f2f24;
  --color-success: #28624c;

  --font-sans: "Geist", sans-serif;
  --font-heading: "Finlandica Text", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1.5vw, 1.375rem);
  --text-h3: clamp(1.5rem, 2.4vw, 2.5rem);
  --text-h2: clamp(2.25rem, 4.4vw, 5rem);
  --text-h1: clamp(3rem, 6.4vw, 7.5rem);
  --text-display: clamp(4rem, 9vw, 10.5rem);

  --leading-tight: 0.94;
  --leading-heading: 1.02;
  --leading-body: 1.55;
  --tracking-tight: -0.055em;
  --tracking-label: 0.08em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-section: clamp(6rem, 12vw, 14rem);

  --container-max: 110rem;
  --container-gutter: clamp(1.25rem, 4vw, 5rem);
  --grid-columns: 4;
  --grid-gap: clamp(1rem, 2vw, 2rem);

  --radius-control: 999px;
  --header-top-height: 5.5rem;
  --header-nav-height: 3.625rem;
  --header-height: calc(var(--header-top-height) + var(--header-nav-height));
  --z-header: 100;
  --focus-ring: 0 0 0 0.1875rem rgba(13, 56, 64, 0.28);
  --duration-fast: 180ms;
  --duration-base: 420ms;
  --duration-slow: 700ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 63.999rem) {
  :root {
    --header-top-height: 5rem;
    --header-nav-height: 0rem;
  }
}

@media (min-width: 48rem) {
  :root {
    --grid-columns: 8;
  }
}

@media (min-width: 64rem) {
  :root {
    --grid-columns: 12;
  }
}