@font-face {
  font-family: "Instrument Serif";
  src: url("../../fonts/instrument-serif/InstrumentSerif-Regular-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../../fonts/instrument-serif/InstrumentSerif-Italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

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

@font-face {
  font-family: "Newsreader";
  src: url("../../fonts/newsreader/Newsreader-Italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
}

@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    --color-paper: #ebe7dc;
    --color-surface: #f5f1e8;
    --color-ink: #20201e;
    --color-quiet-ink: #666258;
    --color-link: #175e8c;
    --color-accent: #753f32;
    --color-on-accent: #fff9ef;
    --color-accent-soft: #dccbc0;
    --color-rule: #b8b1a2;
    --color-focus: #175e8c;
    --color-inverse: #20201e;
    --color-on-inverse: #f5f1e8;
    --color-success: #386345;
    --color-warning: #8a5918;
    --color-error: #963d32;
    --color-info: #315f78;

    --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
    --font-reading: Newsreader, Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
  }
}