body {
  font-family: var(--font-ui);
  font-size: var(--text-body);
}

/* A safety net for headings that don't carry an explicit role from
   `~/styles/type`; the role classes set size and weight themselves. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
}

/* pt-sans-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/pt-sans-v18-latin_latin-ext-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-sans-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/pt-sans-v18-latin_latin-ext-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-sans-narrow-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "PT Sans Narrow";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/pt-sans-narrow-v19-latin_latin-ext-regular.woff2")
    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-sans-narrow-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "PT Sans Narrow";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/pt-sans-narrow-v19-latin_latin-ext-700.woff2")
    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-serif-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/pt-serif-v19-latin_latin-ext-regular.woff2")
    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-serif-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/pt-serif-v19-latin_latin-ext-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-serif-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/pt-serif-v19-latin_latin-ext-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-serif-700italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/pt-serif-v19-latin_latin-ext-700italic.woff2")
    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
  /* Typefaces by role — see `~/styles/type` for the roles that use them.
     This is the only place a family is named, so adopting a new one is an
     edit here and nowhere else.

     `text` is the reading/artifact register (song and artist pages, session
     data, lyrics); `ui` is the instrument register (nav, forms, buttons);
     `display` carries identity; `mono` is reserved for the transcription
     editor, and is still the platform monospace because PT Mono isn't
     downloaded yet — nothing renders in it until that editor exists. */
  --font-display: "PT Sans Narrow", "Arial Narrow", ui-sans-serif, sans-serif;
  --font-text: "PT Serif", Georgia, serif;
  --font-ui: "PT Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Widest the main column gets; wider viewports centre it. Boxes spanning
     the screen take `--content-inline` as their side padding rather than a
     max-width, so a scrolling box keeps its scrollbar at the window edge. The
     100% resolves against whichever box uses it. */
  --content-max-width: 720px;
  --content-inline: max(12px, calc((100% - var(--content-max-width)) / 2));

  /* Type scale. `body` stays at 1rem/16px: anything smaller in a text input
     makes iOS Safari zoom on focus. */
  --text-caption: 0.8125rem;
  --text-label: 0.9375rem;
  --text-body: 1rem;
  --text-item-title: 1.125rem;
  --text-page-title: 1.5rem;
  --text-display: 2rem;

  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  /* Only 400 and 700 are used anywhere: PT (and most families with a serif
     sibling) ships those two, and restricting the palette to them keeps the
     browser from synthesizing weights that don't exist. */
  --weight-regular: 400;
  --weight-bold: 700;

  /* Colors from https://www.radix-ui.com/colors/docs/palette-composition/scales */
  --amber-1: #fefdfb;
  --amber-2: #fefbe9;
  --amber-3: #fff7c2;
  --amber-4: #ffee9c;
  --amber-5: #fbe577;
  --amber-6: #f3d673;
  --amber-7: #e9c162;
  --amber-8: #e2a336;
  --amber-9: #ffc53d;
  --amber-10: #ffba18;
  --amber-11: #ab6400;
  --amber-12: #4f3422;

  --color-primary-1: var(--amber-1);
  --color-primary-2: var(--amber-2);
  --color-primary-3: var(--amber-3);
  --color-primary-4: var(--amber-4);
  --color-primary-5: var(--amber-5);
  --color-primary-6: var(--amber-6);
  --color-primary-7: var(--amber-7);
  --color-primary-8: var(--amber-8);
  --color-primary-9: var(--amber-9);
  --color-primary-10: var(--amber-10);
  --color-primary-11: var(--amber-11);
  --color-primary-12: var(--amber-12);

  --tomato-1: #fffcfc;
  --tomato-2: #fff8f7;
  --tomato-3: #feebe7;
  --tomato-4: #ffdcd3;
  --tomato-5: #ffcdc2;
  --tomato-6: #fdbdaf;
  --tomato-7: #f5a898;
  --tomato-8: #ec8e7b;
  --tomato-9: #e54d2e;
  --tomato-10: #dd4425;
  --tomato-11: #d13415;
  --tomato-12: #5c271f;

  --color-error: var(--tomato-11);

  --sage-1: #fbfdfc;
  --sage-2: #f7f9f8;
  --sage-3: #eef1f0;
  --sage-4: #e6e9e8;
  --sage-5: #dfe2e0;
  --sage-6: #d7dad9;
  --sage-7: #cbcfcd;
  --sage-8: #b8bcba;
  --sage-9: #868e8b;
  --sage-10: #7c8481;
  --sage-11: #5f6563;
  --sage-12: #1a211e;

  --color-white: var(--sage-1);
  --color-gray-1: var(--sage-1);
  --color-gray-2: var(--sage-2);
  --color-gray-3: var(--sage-3);
  --color-gray-4: var(--sage-4);
  --color-gray-5: var(--sage-5);
  --color-gray-6: var(--sage-6);
  --color-gray-7: var(--sage-7);
  --color-gray-8: var(--sage-8);
  --color-gray-9: var(--sage-9);
  --color-gray-10: var(--sage-10);
  --color-gray-11: var(--sage-11);
  --color-gray-12: var(--sage-12);
  --color-black: var(--sage-12);
}