/* GENERATED from DESIGN.md's front matter by scripts/tokens.ts. Do not edit this file: change the value in DESIGN.md,
   then run `npx tsx scripts/tokens.ts` (npm run build:site runs it too). tests/tokens.test.ts fails when this file
   and DESIGN.md disagree. */
:root {
  /* colors */
  --navy: #1f2a4a;
  --navy-hi: #3d4f86;
  --ivory: #fffaf0;
  --cream: #f2e7cc;
  --gold: #f2c443;
  --gold-hi: #ffe082;
  --gold-deep: #b98516;
  --felt: #1a2444;
  --felt-lit: #283866;
  --felt-deep: #121a33;
  --paper: #f8f1e1;
  --paper-line: #ddd0b2;
  --ink-2: #4a5470;
  --mist: #c3cbe0;
  --sky: #cfe6f7;
  --red: #d8433a;
  --blue: #3a72d8;
  --bronze: #d6a631;
  --teal: #2fa89a;
  --bronze-deep: #a87a12;
  --teal-deep: #23887c;
  --heart: #e2584c;
  /* rgb triplets, for alpha steps: rgba(var(--ivory-rgb), 0.62) */
  --navy-rgb: 31, 42, 74;
  --ivory-rgb: 255, 250, 240;
  --felt-rgb: 26, 36, 68;
  --felt-deep-rgb: 18, 26, 51;
  --gold-rgb: 242, 196, 67;
  --gold-deep-rgb: 185, 133, 22;
  /* font families */
  --display: "Alfa Slab One", "Rockwell Extra Bold", "Rockwell", serif;
  --text: "Zilla Slab", "Rockwell", Georgia, serif;
  /* type scale (the fluid sizes) */
  --fs-band: clamp(36px, 6vw, 76px);
  --fs-read-h1: clamp(36px, 5.4vw, 64px);
  --fs-read-h2: clamp(26px, 3.2vw, 36px);
  --fs-card-name: clamp(24px, 2.4vw, 32px);
  --fs-h3: clamp(20px, 1.8vw, 24px);
  --fs-lede: clamp(19px, 1.7vw, 22px);
  --fs-body: clamp(17px, 1.3vw, 18px);
  --fs-small: 15px;
  --fs-tiny: 13px;
  /* spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-band: clamp(72px, 10vw, 136px);
  --sp-read-gap: clamp(40px, 5vw, 56px);
  /* layout: widths and gutters */
  --wrap: 1180px;
  --read-width: 720px;
  --gutter: clamp(16px, 4vw, 48px);
  --gl: max(var(--gutter), env(safe-area-inset-left, 0px));
  --gr: max(var(--gutter), env(safe-area-inset-right, 0px));
  --bar-h: 64px;
  --tabs-h: calc(64px + env(safe-area-inset-bottom, 0px));
  /* radii */
  --r: 14px;
  --r-tick: 3px;
  --r-chip: 8px;
  --r-btn: 12px;
  --r-btn-lg: 14px;
  --r-plate: 20px;
  --r-sheet: 24px;
  /* elevation: soft shadows (box-shadow, text-shadow, drop-shadow) */
  --shadow-btn: 0 6px 14px -6px rgba(var(--navy-rgb), 0.55);
  --shadow-btn-hover: 0 10px 20px -8px rgba(var(--navy-rgb), 0.6);
  --shadow-poster: 0 22px 40px -18px rgba(5, 9, 22, 0.75);
  --shadow-plate: 0 26px 50px -24px rgba(var(--navy-rgb), 0.45);
  --shadow-lid: 0 30px 50px -10px rgba(5, 9, 22, 0.55);
  --shadow-bar: 0 10px 26px -14px rgba(5, 9, 22, 0.7);
  --shadow-tab-disc: 0 8px 20px -6px rgba(var(--gold-rgb), 0.45);
  --shadow-logo: 0 16px 22px rgba(var(--navy-rgb), 0.35);
  --shadow-logo-drop: 0 36px 28px rgba(var(--navy-rgb), 0.16);
  --shadow-logo-clear: 0 16px 22px rgba(var(--navy-rgb), 0);
  --shadow-text-art: 0 1px 2px rgba(5, 9, 22, 0.45);
  /* motion: easing and durations */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-press: 160ms;
  --dur-quick: 150ms;
  --dur-fast: 250ms;
  --dur-medium: 350ms;
  --dur-focal: 900ms;
  --ease-iris: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-sweep: cubic-bezier(0.45, 0, 0.25, 1);
  /* stacking */
  --z-bar: 20;
  --z-tabs: 30;
  --z-skip: 50;
  --z-launch: 101;
}