/* Generated by design/book.mjs with Design Book. Do not edit by hand — run `npm run build`. */
:root {
  --paper-cream: #f7f1e5;
  --paper-sheet: #fbf8f1;
  --paper-card: #efe6d3;
  --ink-black: #000000;
  --ink-brown-800: #2b2620;
  --ink-brown-600: #5f584c;
  --ink-brown-500: #7a7264;
  --ink-brown-400: #9c9381;
  --ink-white: #ffffff;
  --marker-blue: #98c0d9;
  --marker-salmon: #fd9680;
  --marker-butter: #f6d27a;
  --marker-mint: #a8d5ba;
  --marker-lavender: #c3b4e6;
  --marker-pink: #f4b6c8;
  --status-available: #007d4e;
  --status-waitlist: #cf6b0e;
  --status-none: #9c9381;
  --ruling-margin: #c9584a;
  --ruling-line: #9bb0c4;
  --color-page: var(--paper-cream);
  --color-surface: var(--paper-sheet);
  --color-card: var(--paper-card);
  --color-text: #000000;
  --color-text-muted: #5f584c;
  --color-line: #9c9381;
  --color-line-strong: var(--color-text);
  --color-on-marker: #000000;
  --color-button: var(--color-text);
  --color-on-button: #fbf8f1;
  --color-button-hover: color-mix(in lab, var(--color-button) 82%, var(--color-page));
  --color-brand: var(--marker-blue);
  --color-question: var(--marker-salmon);
  --color-focus: var(--color-text);
  --space-base: 16px;
  --space-2xs: calc(var(--space-base) * 0.25);
  --space-xs: calc(var(--space-base) * 0.5);
  --space-s: calc(var(--space-base) * 0.75);
  --space-m: var(--space-base);
  --space-l: calc(var(--space-base) * 1.5);
  --space-xl: calc(var(--space-base) * 2.5);
  --space-2xl: calc(var(--space-base) * 4);
  --space-3xl: calc(var(--space-base) * 6);
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-icon: 20px;
  --motion-base: 160ms;
  --motion-ease: var(--motion-base) ease-out;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-size-base: 1rem;
  --font-size-s: calc(var(--font-size-base) * 0.8);
  --font-size-xs: calc(var(--font-size-base) * 0.64);
  --font-size-m: calc(var(--font-size-base) * 1.25);
  --font-size-l: calc(var(--font-size-base) * 1.5625);
  --font-size-xl: calc(var(--font-size-base) * 2.44140625);
  --font-size-2xl: calc(var(--font-size-base) * 3.814697266);
  --font-size-3xl: calc(var(--font-size-base) * 5.960464478);
  --font-size-display: 6.5rem;
  --font-size-h2: 3.5rem;
  --font-size-h3: 2.125rem;
  --font-size-h4: 1.375rem;
  --type-body-font-family: var(--font-sans);
  --type-body-font-size: var(--font-size-base);
  --type-body-line-height: 1.55;
  --type-body-font-weight: 400;
  --type-small-font-family: var(--type-body-font-family);
  --type-small-font-size: var(--font-size-s);
  --type-small-line-height: 1.5;
  --type-small-font-weight: var(--type-body-font-weight);
  --type-label-font-family: var(--font-mono);
  --type-label-font-size: var(--font-size-s);
  --type-label-line-height: 1.4;
  --type-label-font-weight: 500;
  --type-label-letter-spacing: 0.04em;
  --type-heading-font-family: var(--font-sans);
  --type-heading-font-size: var(--font-size-h4);
  --type-heading-line-height: 1.2;
  --type-heading-font-weight: 600;
  --type-heading-letter-spacing: -0.015em;
  --type-h3-font-family: var(--type-heading-font-family);
  --type-h3-font-size: var(--font-size-h3);
  --type-h3-line-height: 1.08;
  --type-h3-font-weight: var(--type-heading-font-weight);
  --type-h3-letter-spacing: -0.025em;
  --type-h2-font-family: var(--type-heading-font-family);
  --type-h2-font-size: var(--font-size-h2);
  --type-h2-line-height: 1;
  --type-h2-font-weight: var(--type-heading-font-weight);
  --type-h2-letter-spacing: -0.035em;
  --type-display-font-family: var(--type-heading-font-family);
  --type-display-font-size: var(--font-size-display);
  --type-display-line-height: 0.92;
  --type-display-font-weight: var(--type-heading-font-weight);
  --type-display-letter-spacing: -0.045em;
  --type-lede-font-family: var(--type-body-font-family);
  --type-lede-font-size: var(--font-size-m);
  --type-lede-line-height: 1.45;
  --type-lede-font-weight: var(--type-body-font-weight);
}

.type-body {
  font-family: var(--type-body-font-family);
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-font-weight);
}

.type-small {
  font-family: var(--type-small-font-family);
  font-size: var(--type-small-font-size);
  line-height: var(--type-small-line-height);
  font-weight: var(--type-small-font-weight);
}

.type-label {
  font-family: var(--type-label-font-family);
  font-size: var(--type-label-font-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--type-label-font-weight);
  letter-spacing: var(--type-label-letter-spacing);
}

.type-heading {
  font-family: var(--type-heading-font-family);
  font-size: var(--type-heading-font-size);
  line-height: var(--type-heading-line-height);
  font-weight: var(--type-heading-font-weight);
  letter-spacing: var(--type-heading-letter-spacing);
}

.type-h3 {
  font-family: var(--type-h3-font-family);
  font-size: var(--type-h3-font-size);
  line-height: var(--type-h3-line-height);
  font-weight: var(--type-h3-font-weight);
  letter-spacing: var(--type-h3-letter-spacing);
}

.type-h2 {
  font-family: var(--type-h2-font-family);
  font-size: var(--type-h2-font-size);
  line-height: var(--type-h2-line-height);
  font-weight: var(--type-h2-font-weight);
  letter-spacing: var(--type-h2-letter-spacing);
}

.type-display {
  font-family: var(--type-display-font-family);
  font-size: var(--type-display-font-size);
  line-height: var(--type-display-line-height);
  font-weight: var(--type-display-font-weight);
  letter-spacing: var(--type-display-letter-spacing);
}

.type-lede {
  font-family: var(--type-lede-font-family);
  font-size: var(--type-lede-font-size);
  line-height: var(--type-lede-line-height);
  font-weight: var(--type-lede-font-weight);
}

@media (max-width: 640px) {
  :root {
    --space-3xl: calc(var(--space-base) * 4);
    --font-size-display: 3.25rem;
    --font-size-h2: 2.25rem;
    --font-size-h3: 1.625rem;
    --font-size-h4: 1.25rem;
  }
}