@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin-variable-v1.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-variable-v1.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Expanded";
  src: url("/assets/fonts/archivo-latin-variable-v1.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@layer tokens {
  :root {
    color-scheme: dark;
    --ink: #0B0B0B;
    --paper: #F6F3EE;
    --stone: #8A8580;
    --bronze: #C9A66B;
    --rule: rgb(246 243 238 / 12%);
    --muted: rgb(246 243 238 / 66%);
    --quiet: rgb(246 243 238 / 45%);
    --gutter: clamp(20px, 5vw, 64px);
    --content: 1320px;
    --section: clamp(96px, 12vw, 176px);
    --sans: Inter, "Helvetica Neue", Arial, sans-serif;
    --serif: Fraunces, "Iowan Old Style", "Baskerville", Georgia, serif;
    --label: "Archivo Expanded", "Arial Narrow", Arial, sans-serif;
  }

}