@font-face {
  font-family: "Polemos Serif";
  src: url("/assets/fonts/SourceSerif4Display-Regular.ttf.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Polemos Sans";
  src: url("/assets/fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations");
  font-display: swap;
  font-style: normal;
  font-weight: 200 900;
}

:root {
  color-scheme: light;

  --raw-canvas-050: #f5f5f5;
  --raw-blue-050: #bce1f1;
  --raw-teal-700: #225163;
  --raw-ink-950: #191618;
  --raw-white: #ffffff;
  --raw-control-100: #f3f3f3;
  --raw-border-200: #dadada;
  --raw-muted-500: #7d7f81;
  --raw-focus-blue-600: #115cd9;

  --color-surface-page: var(--raw-canvas-050);
  --color-surface-hero: var(--raw-blue-050);
  --color-surface-reading: var(--raw-white);
  --color-surface-control: var(--raw-control-100);
  --color-surface-panel: #e9eef3;
  --color-surface-panel-inner: #fafbfc;
  --color-content-primary: var(--raw-ink-950);
  --color-content-secondary: var(--raw-teal-700);
  --color-content-inverse: var(--raw-white);
  --color-action-primary: var(--raw-teal-700);
  --color-border-subtle: var(--raw-border-200);
  --color-focus-light: var(--raw-focus-blue-600);
  --color-focus-dark: var(--raw-white);

  --font-display: "Polemos Serif", Georgia, "Times New Roman", serif;
  --font-text: "Polemos Sans", Arial, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.875rem;
  --space-8: 2.5rem;
  --space-9: 3.75rem;
  --space-section: 6.25rem;
  --space-section-compact: 3.75rem;

  --radius-hero: 1.25rem;
  --radius-control: 0.5rem;
  --radius-pill: 31.25rem;
  --radius-circle: 50%;

  --shadow-prominent: 0 1.5rem 2.25rem rgb(0 0 0 / 25%);
  --shadow-scroll: 0 1.5rem 1.5rem rgb(0 0 0 / 36%);

  --layout-page-max: 77.5rem;
  --layout-reading-max: 72ch;
  --layout-editorial-max: 66.25rem;
  --layout-rail-width: 13rem;
  --layout-page-pad: 0.9375rem;
  --layout-hero-inset: 0.9375rem;

  --header-height: 4.25rem;
  --motion-fast: 150ms;
  --motion-medium: 300ms;
  --motion-slow: 500ms;
  --ease-standard: ease;
}

@media (min-width: 48rem) {
  :root {
    --layout-page-pad: 1.25rem;
    --layout-hero-inset: 1.25rem;
    --header-height: 4.875rem;
  }
}

@media (min-width: 62rem) {
  :root {
    --layout-page-pad: 1.875rem;
    --layout-hero-inset: 1.5625rem;
  }
}

@media (max-width: 47.999rem) {
  :root {
    --space-section: 2.5rem;
    --space-section-compact: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-qa-motion="normal"]) {
    --motion-fast: 1ms;
    --motion-medium: 1ms;
    --motion-slow: 1ms;
  }
}