@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --nana-ink: #1c201a;
  --nana-ink-soft: #51564d;
  --nana-paper: #fbfaf6;
  --nana-soft-paper: #f2eee5;
  --nana-white: #ffffff;
  --nana-coral: #e56f51;
  --nana-coral-dark: #b94831;
  --nana-mint: #b9ddd2;
  --nana-acid: #d9e978;
  --nana-sky: #b9d8ef;
  --nana-line: rgba(28, 32, 26, 0.16);
  --nana-line-strong: rgba(28, 32, 26, 0.42);
  --nana-focus: #0067c5;
  --nana-success: #28754c;
  --nana-error: #b3261e;
  --nana-font-display: "Bricolage Grotesque", Arial, sans-serif;
  --nana-font-body: "Instrument Sans", Arial, sans-serif;
  --nana-container: 1240px;
  --nana-gutter: 40px;
  --nana-radius: 6px;
  --nana-radius-control: 4px;
  --nana-space-1: 8px;
  --nana-space-2: 12px;
  --nana-space-3: 16px;
  --nana-space-4: 24px;
  --nana-space-5: 32px;
  --nana-space-6: 48px;
  --nana-space-7: 72px;
  --nana-space-8: 104px;
  --nana-transition: 200ms ease-out;
}

@media (max-width: 767px) {
  :root {
    --nana-gutter: 20px;
    --nana-space-7: 56px;
    --nana-space-8: 72px;
  }
}