@font-face {
  font-family: "Stopirex Display";
  src: url("../assets/fonts/Oswald-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}

@font-face {
  font-family: "Stopirex Mono";
  src: url("../assets/fonts/RobotoMono-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}

:root {
  --color-bg: #ffffff;
  --color-surface: #f3f2ee;
  --color-text: #575858;
  --color-muted: #777878;
  --color-reference: #989999;
  --color-border: #d9d9d5;
  --font-display: "Stopirex Display", Arial, sans-serif;
  --font-mono: "Stopirex Mono", monospace;
  --fs-h1: 54px;
  --fs-h2: 44px;
  --fs-h3: 30px;
  --fs-body: 11px;
  --fs-reference: 9px;
  --line-height-default: 1.5;
  --letter-spacing-default: 0;
  --container: 1440px;
  --gutter: 55px;
  --content-gutter: 120px;
  --gutter-mobile: 20px;
  --header-height: 54px;
  --section-padding-y: 144px;
  --page-first-padding-top: 60px;
  --page-first-padding-bottom: var(--section-padding-y);
  --breadcrumb-first-section-margin: 60px;
  --fs-header-footer: 10.5px;
  --fs-label: 11px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 4rem;
  --space-6: 8rem;
  --transition: 360ms ease;
}

/* Responsive contract: mobile <=800px, tablet 801-1000px, desktop >=1001px. */
@media (max-width: 800px) {
  :root {
    --fs-h1: 34px;
    --fs-h2: 30px;
    --fs-h3: 26px;
    --fs-body: 13px;
    --fs-reference: 11px;
    --fs-header-footer: 12px;
    --gutter: 20px;
    --content-gutter: 20px;
    --gutter-mobile: 20px;
    --header-height: 64px;
    --page-first-padding-top: 50px;
    --page-first-padding-bottom: 50px;
    --breadcrumb-first-section-margin: 32px;
    --section-padding-top-mobile: 50px;
    --section-padding-bottom-mobile: 50px;
  }
}