@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/big-shoulders-display-latin.woff2") format("woff2");
}

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

:root {
  --pr-concrete: #e7e5e0;
  --pr-concrete-deep: #d5d2cb;
  --pr-joint: #a6a299;
  --pr-asphalt: #161819;
  --pr-asphalt-soft: #2a2d2f;
  --pr-ink-muted: #4d4f4c;
  --pr-on-dark: #ecebe7;
  --pr-on-dark-muted: #a7aaa6;
  --pr-tip-red: #c4301c;
  --pr-tip-yellow: #f6c500;
  --pr-tip-green: #17703e;
  --pr-white: #ffffff;
  --pr-canary: #f7eba6;
  --pr-error: #9e2a1c;
  --pr-display: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
  --pr-text: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --pr-ease: cubic-bezier(.2, .8, .2, 1);

  --pr-size-hero: clamp(3.4rem, 1.4rem + 7.6vw, 8.5rem);
  --pr-size-h2: clamp(2.4rem, 1.5rem + 3.6vw, 4.25rem);
  --pr-size-h3: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  --pr-size-lede: clamp(1.1rem, 1.04rem + .3vw, 1.25rem);
  --pr-size-small: .875rem;
  --pr-content: 1360px;
  --pr-gutter: clamp(1rem, 4vw, 4rem);
  --pr-inset: max(var(--pr-gutter), calc((100% - var(--pr-content)) / 2));
  --pr-band: clamp(4rem, 3rem + 5vw, 8rem);
  --pr-rule: 2px solid var(--pr-asphalt);

  --ui-color-background: var(--pr-concrete);
  --ui-color-surface: var(--pr-white);
  --ui-color-text: var(--pr-asphalt);
  --ui-color-muted: var(--pr-ink-muted);
  --ui-color-border: var(--pr-asphalt);
  --ui-color-accent: var(--pr-tip-yellow);
  --ui-color-accent-text: var(--pr-asphalt);
  --ui-color-error: var(--pr-error);
  --ui-font-body: var(--pr-text);
  --ui-font-heading: var(--pr-display);
  --ui-size-body: 1.0625rem;
  --ui-size-icon: 1.25em;
  --ui-space-sm: .5rem;
  --ui-space-md: 1rem;
  --ui-space-lg: 2rem;
  --ui-radius-control: 0;
  --ui-radius-surface: 0;
  --ui-border-width: 2px;
}