/* Design tokens: the only place raw sizes, fonts and motion values are defined. */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-opsz.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-opsz-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* type scale (rem) */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-card: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-display: clamp(2.75rem, 9vw, 5rem);

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* shape: sheets are softest, cards next, controls are pills */
  --radius-sm: 12px;
  --radius-card: 20px;
  --radius-sheet: 28px;
  --radius-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 520ms;

  /* wall */
  --card-w: 280px;

  --z-wall: 1;
  --z-chrome: 20;
  --z-toast: 60;
}