/* GENERATED by scripts/build.mjs from tokens.json. Do not edit by hand. */

/* AppZoo tokens. Themes: light = Broadside, dark = Night show.
   No data-theme on <html> (or data-theme="system"): follow the browser's prefers-color-scheme.
   data-theme="light" | "dark": that theme, whatever the browser says. */

:root {
  --border: var(--ink);
  --link: var(--prussian);
  --focus: var(--prussian);
  --danger: var(--vermilion-strong);
  --success: var(--prussian);
  --font-poster: "Rye", "Ultra", Georgia, serif;
  --font-display: "Ultra", "Rockwell Extra Bold", "Rockwell", Georgia, serif;
  --font-sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --type-poster: 400 72px/72px var(--font-poster);
  --type-display: 400 44px/50px var(--font-display);
  --type-heading: 400 28px/34px var(--font-display);
  --type-title: 400 20px/26px var(--font-display);
  --type-lead: 400 19px/28px var(--font-sans);
  --type-body: 400 16px/24px var(--font-sans);
  --type-body-s: 400 14px/20px var(--font-sans);
  --type-binomial: italic 400 15px/20px var(--font-sans);
  --type-label: 500 12px/16px var(--font-mono);
  --type-catalog: 400 13px/16px var(--font-mono);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-0: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-arch: 9999px;
  --stroke-hair: 1px;
  --stroke-ink: 2px;
  --stroke-block: 3px;
  --layout-max: 1200px;
  --layout-measure: 68ch;
  --layout-card: 260px;
}

/* Broadside (light): the default */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --paper: #f3e9d2;
  --paper-raised: #faf4e6;
  --paper-sunk: #e6d8b9;
  --ink: #1b1712;
  --ink-muted: #5a4f42;
  --rule: #c8b792;
  --vermilion: #b8321b;
  --vermilion-strong: #8f2614;
  --vermilion-wash: #f6d9cb;
  --on-vermilion: #faf4e6;
  --marigold: #e0a526;
  --marigold-ink: #7a5410;
  --marigold-wash: #f5e3b3;
  --on-marigold: #1b1712;
  --prussian: #1f4e79;
  --prussian-strong: #163a5c;
  --prussian-wash: #d7e1ea;
  --on-prussian: #faf4e6;
  --shadow-press: 3px 3px 0 #1b1712;
  --shadow-print: 5px 5px 0 #1b1712;
  --shadow-lift: 8px 8px 0 #1b1712;
  --focus-ring: 0 0 0 2px #f3e9d2, 0 0 0 5px #1f4e79;
}

/* Night show (dark): chosen explicitly */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #15120e;
  --paper-raised: #1f1a15;
  --paper-sunk: #0c0a07;
  --ink: #f3e9d2;
  --ink-muted: #b9ab92;
  --rule: #3d342a;
  --vermilion: #f0735a;
  --vermilion-strong: #f5937f;
  --vermilion-wash: #3b1a12;
  --on-vermilion: #15120e;
  --marigold: #f0c050;
  --marigold-ink: #f2c860;
  --marigold-wash: #33280f;
  --on-marigold: #15120e;
  --prussian: #7fb0dc;
  --prussian-strong: #a3c7e8;
  --prussian-wash: #172636;
  --on-prussian: #15120e;
  --shadow-press: 3px 3px 0 #b8321b;
  --shadow-print: 5px 5px 0 #b8321b;
  --shadow-lift: 8px 8px 0 #b8321b;
  --focus-ring: 0 0 0 2px #15120e, 0 0 0 5px #7fb0dc;
}

/* Night show (dark): following the browser */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --paper: #15120e;
    --paper-raised: #1f1a15;
    --paper-sunk: #0c0a07;
    --ink: #f3e9d2;
    --ink-muted: #b9ab92;
    --rule: #3d342a;
    --vermilion: #f0735a;
    --vermilion-strong: #f5937f;
    --vermilion-wash: #3b1a12;
    --on-vermilion: #15120e;
    --marigold: #f0c050;
    --marigold-ink: #f2c860;
    --marigold-wash: #33280f;
    --on-marigold: #15120e;
    --prussian: #7fb0dc;
    --prussian-strong: #a3c7e8;
    --prussian-wash: #172636;
    --on-prussian: #15120e;
    --shadow-press: 3px 3px 0 #b8321b;
    --shadow-print: 5px 5px 0 #b8321b;
    --shadow-lift: 8px 8px 0 #b8321b;
    --focus-ring: 0 0 0 2px #15120e, 0 0 0 5px #7fb0dc;
  }
}

/* Day/night image pairs: put both <img>s in the markup, class="az-day" and class="az-night";
   the theme hides the other one. Give both loading="lazy" so the hidden one is never fetched. */
:root[data-theme="light"] .az-night,
:root[data-theme="dark"] .az-day { display: none !important; }
@media not all and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .az-night { display: none !important; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .az-day { display: none !important; }
}

/* Type styles as utility classes (label is always uppercase) */
.az-type-poster { font: var(--type-poster); }
.az-type-display { font: var(--type-display); }
.az-type-heading { font: var(--type-heading); }
.az-type-title { font: var(--type-title); }
.az-type-lead { font: var(--type-lead); }
.az-type-body { font: var(--type-body); }
.az-type-body-s { font: var(--type-body-s); }
.az-type-binomial { font: var(--type-binomial); }
.az-type-label { font: var(--type-label); letter-spacing: 0.08em; text-transform: uppercase; }
.az-type-catalog { font: var(--type-catalog); letter-spacing: 0.02em; }