@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
}

:root {
  --pn-sky: #f4f8fb;
  --pn-glass: #e6eff6;
  --pn-glass-deep: #d5e3ee;
  --pn-white: #ffffff;
  --pn-slate: #1d2b38;
  --pn-slate-soft: #46566a;
  --pn-squeegee: #0b5cad;
  --pn-squeegee-deep: #084682;
  --pn-silver: #b8c5d1;
  --pn-rule: 1px solid var(--pn-silver);
  --pn-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --pn-sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --pn-measure: 38rem;
  --pn-wide: 76rem;
  --pn-gutter: clamp(1rem, 4vw, 3rem);
  --pn-band-space: clamp(3.5rem, 9vw, 7.5rem);

  --ui-color-background: var(--pn-sky);
  --ui-color-surface: var(--pn-white);
  --ui-color-text: var(--pn-slate);
  --ui-color-muted: var(--pn-slate-soft);
  --ui-color-border: #8798a9;
  --ui-color-accent: var(--pn-squeegee);
  --ui-color-accent-text: var(--pn-white);
  --ui-color-error: #a1262b;
  --ui-font-body: var(--pn-sans);
  --ui-font-heading: var(--pn-serif);
  --ui-size-body: 1.0625rem;
  --ui-space-sm: .5rem;
  --ui-space-md: 1.25rem;
  --ui-space-lg: 1.75rem;
  --ui-radius-control: 2px;
  --ui-radius-surface: 2px;
  --ui-border-width: 1px;
}