/* Generated from packages/ui (design/system/project/tokens.json) by
   `pnpm --filter @stewbot/site build`. Don’t edit it by hand. */
:root {
  color-scheme: light dark;
  --paper: #f7f5f0;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --fill: #eeeae2;
  --fill-strong: #e3ded4;
  --thumb: #ffffff;
  --line: #e5e0d7;
  --line-strong: #868e9c;
  --ink: #1b2331;
  --ink-muted: #586273;
  --ink-faint: #7d8594;
  --slate: #3d5a86;
  --slate-pressed: #314a70;
  --slate-soft: #e4ebf5;
  --on-slate: #ffffff;
  --saffron: #e9a23b;
  --saffron-strong: #a8650c;
  --saffron-soft: #fbefd9;
  --saffron-ink: #8c5a12;
  --on-saffron: #2a1d08;
  --herb: #2f6b4a;
  --herb-soft: #e3f0e7;
  --on-herb: #ffffff;
  --tomato: #b93a32;
  --tomato-soft: #f9e3e0;
  --tomato-ink: #9a3029;
  --on-tomato: #ffffff;
  --focus: #3d5a86;
  --scrim: rgba(27, 35, 49, 0.32);
  --glass: rgba(247, 245, 240, 0.82);
  --tile-saffron: #f7e9cf;
  --tile-sage: #e2ebdb;
  --tile-tomato: #f6e0d9;
  --tile-slate: #e0e7f1;
  --tile-oat: #eee7db;
  --shadow-card: 0 1px 2px rgba(27, 35, 49, 0.05), 0 4px 14px rgba(27, 35, 49, 0.05);
  --shadow-raised: 0 12px 32px rgba(27, 35, 49, 0.14), 0 2px 6px rgba(27, 35, 49, 0.06);
  --shadow-thumb: 0 1px 3px rgba(27, 35, 49, 0.16);
  --font-sans: -apple-system, system-ui, "SF Pro Text", "Helvetica Neue", sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --large-title: 700 2rem/1.2059 var(--font-rounded);
  --title-1: 700 1.6471rem/1.2143 var(--font-rounded);
  --title-2: 600 1.2941rem/1.2727 var(--font-rounded);
  --title-3: 600 1.1765rem/1.25 var(--font-sans);
  --headline: 600 1rem/1.2941 var(--font-sans);
  --body: 400 1rem/1.4118 var(--font-sans);
  --callout: 400 0.9412rem/1.375 var(--font-sans);
  --subhead: 400 0.8824rem/1.3333 var(--font-sans);
  --footnote: 400 0.7647rem/1.3846 var(--font-sans);
  --caption: 500 0.7059rem/1.3333 var(--font-sans);
  --cook-step: 500 1.7647rem/1.2667 var(--font-sans);
  --cook-step-wide: 500 2.3529rem/1.25 var(--font-sans);
  --cook-detail: 400 1.1765rem/1.35 var(--font-sans);
  --timer-xl: 600 3.2941rem/1.0714 var(--font-rounded);
  --timer: 600 1rem/1.2941 var(--font-rounded);
  --step-number: 700 0.8824rem/1.3333 var(--font-rounded);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --size-touch: 44px;
  --size-button: 50px;
  --size-kitchen: 64px;
  --size-tile: 64px;
  --size-sheet: 560px;
  --size-sidebar: 380px;
  --size-reading: 680px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #11161e;
    --surface: #1a212c;
    --surface-raised: #222a37;
    --fill: #262e3a;
    --fill-strong: #313a48;
    --thumb: #3d4758;
    --line: #2c3543;
    --line-strong: #6a7586;
    --ink: #f1eee8;
    --ink-muted: #a7afbc;
    --ink-faint: #9099a8;
    --slate: #a8bcdd;
    --slate-pressed: #93a9cf;
    --slate-soft: #243248;
    --on-slate: #0f1828;
    --saffron: #f0b254;
    --saffron-strong: #e0a246;
    --saffron-soft: #3a2c15;
    --saffron-ink: #f4c373;
    --on-saffron: #241804;
    --herb: #7fc39a;
    --herb-soft: #1b3326;
    --on-herb: #0f1828;
    --tomato: #f08a80;
    --tomato-soft: #3d1f1c;
    --tomato-ink: #f4a59d;
    --on-tomato: #2a0d0a;
    --focus: #a8bcdd;
    --scrim: rgba(0, 0, 0, 0.55);
    --glass: rgba(17, 22, 30, 0.78);
    --tile-saffron: #3a2f1c;
    --tile-sage: #233024;
    --tile-tomato: #3a2420;
    --tile-slate: #212c3c;
    --tile-oat: #2e2922;
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
}