@layer tokens, base, layout, pages;

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

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

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

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

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

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/caveat-latin-400-normal.woff2") format("woff2");
}

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

@font-face {
  font-family: "Nothing You Could Do";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/nothing-you-could-do-latin-400-normal.woff2") format("woff2");
}

@layer tokens {
  :root {
    --font-serif: "Instrument Serif", "Iowan Old Style", Palatino, Georgia, serif;
    --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
    --font-hand: "Caveat", "Segoe Script", "Bradley Hand", cursive;
    --font-sign: "Nothing You Could Do", "Segoe Script", "Bradley Hand", cursive;

    --font-size-0: 0.75rem;
    --font-size-1: 1rem;
    --font-size-2: 1.1rem;
    --font-size-3: 1.25rem;
    --font-size-4: 1.5rem;
    --font-size-5: 2rem;
    --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);

    --font-lineheight-1: 1.25;
    --font-lineheight-3: 1.5;

    --size-1: 0.25rem;
    --size-2: 0.5rem;
    --size-3: 1rem;
    --size-4: 1.25rem;
    --size-5: 1.5rem;
    --size-6: 1.75rem;
    --size-7: 2rem;
    --size-8: 3rem;
    --size-9: 4rem;
    --size-10: 5rem;

    --border-size-1: 1px;
    --border-size-2: 2px;
    --radius-1: 2px;
    --radius-2: 5px;

    --size-content-3: 60ch;

    --paper: #faf9f5;
    --paper-2: #f3f0e8;
    --ink: #1a1814;
    --ink-muted: #5c574e;
    --rule: #e4dfd4;
    --accent: #2b5c8a;
    --accent-hover: #1f4a70;
    --quote: #a96a2e;
    --danger: #b33a3a;
    --danger-hover: #8f2e2e;
    --on-accent: #faf9f5;

    --gutter: var(--size-5);
    --measure: var(--size-content-3);
    --measure-wide: 72rem;
  }
}