@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --color-canvas: #11100e;
  --color-surface: #1b1916;
  --color-surface-strong: #25221d;
  --color-ink: #f4efe5;
  --color-text: #ddd3c4;
  --color-muted: #a89a8a;
  --color-accent: #2f7dff;
  --color-accent-strong: #7ab0ff;
  --color-accent-soft: #172942;
  --color-line: #4c453c;
  --color-focus: #ffcf3f;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;

  --font-size-display: 3.75rem;
  --font-size-heading-xl: 2.875rem;
  --font-size-heading-lg: 2.25rem;
  --font-size-heading-md: 1.75rem;
  --font-size-heading-sm: 1.5rem;
  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-meta: 0.875rem;
  --font-size-micro: 0.75rem;

  --line-height-display: 0.9;
  --line-height-heading: 1;
  --line-height-body: 1.55;
  --line-height-compact: 1.3;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-control: 0.25rem;
  --radius-surface: 0.375rem;
  --radius-pill: 999px;

  --border-thin: 1px;
  --border-strong: 2px;
  --shadow-media: 0 1.25rem 3rem rgb(0 0 0 / 48%);

  --container-max: 75rem;
  --gutter: 1rem;
  --header-height: 4rem;
  --touch-target: 2.75rem;

  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-signature: 620ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (min-width: 48rem) {
  :root {
    --font-size-display: 5.5rem;
    --font-size-heading-xl: 3.75rem;
    --font-size-heading-lg: 2.875rem;
    --gutter: 2rem;
    --header-height: 4.5rem;
  }
}