/* tokens.css — the monorepo's shared look (design/README.md), part 1: the palette as custom properties,
   by day and by night, and the display font. Every page of every product links it, whatever its own CSS:
   it defines only --fire-* properties and a font face, so it never restyles anything by itself.
   Canonical here; projects get a copy through `bun design/sync.js`. Edit this file, never a copy. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────── */
/* The palette: Miaka by GlueStudio (COLOURlovers 778713), the owner's choice of 2026-10-19, in their arrangement
   "C": a deep teal ground with pale yellow text, pale yellow cards with near-black text, near-black hard shadows,
   a coral block and header, turquoise buttons. The five colours have their own names; the old names (from the
   earlier Fresh Cut Day palette) stay as aliases so pages written with them keep working, mapped by role. */
:root {
  --fire-coral: #FC354C;      /* the loud block, the header, highlights; text on it is near-black */
  --fire-night: #29221F;      /* near-black: text on light, every shadow, the footer */
  --fire-sea: #13747D;        /* deep teal: the ground */
  --fire-turquoise: #0ABFBC;  /* buttons, the selected item, focus; text on it is near-black */
  --fire-sand: #FCF7C5;       /* pale yellow: cards, and text on the ground */
  /* Old names, by role. */
  --fire-deep: var(--fire-night);
  --fire-lime: var(--fire-coral);
  --fire-teal: var(--fire-sea);
  --fire-teal-soft: var(--fire-turquoise);
  --fire-green: var(--fire-turquoise);
  --fire-cream: var(--fire-sand);

  /* Roles, by day (design/README.md, "Sites"), scaled to small UI. */
  --fire-ground: var(--fire-sea);
  --fire-surface: var(--fire-sand);   /* cards and panels; they set their own text colours (fire.css .card) */
  --fire-ink: var(--fire-sand);       /* text on the ground (5.1:1) */
  --fire-muted: var(--fire-sand);
  --fire-on-surface: var(--fire-night);   /* text on cards (14:1) */
  --fire-on-surface-muted: #5a4d46;
  --fire-edge: var(--fire-night);
  --fire-shadow: var(--fire-night);
  --fire-line: rgb(252 247 197 / .22);
  --fire-fill: rgb(252 247 197 / .14);    /* quiet controls on the ground */
  --fire-fill-2: rgb(252 247 197 / .24);
  --fire-accent: var(--fire-sand);        /* links: underlined */
  --fire-tint: var(--fire-turquoise);     /* the selected item */
  --fire-ok: var(--fire-turquoise);
  --fire-wait: #e9a820;
  --fire-bad: var(--fire-coral);

  --fire-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --fire-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fire-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fire-radius: 10px;        /* small cards, fields (buttons are pills) */
  --fire-radius-card: 14px;   /* cards and panels */
  --fire-line-w: 0px;         /* no outlines */
  /* The loud block: coral with near-black text. */
  --fire-loud: var(--fire-coral);
  --fire-loud-ink: var(--fire-night);
  --fire-loud-head: var(--fire-night);
  --fire-loud-shadow: var(--fire-night);
  color-scheme: dark;
}
/* Night: the ground goes near-black, cards deep teal with pale yellow text, the coral stays. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fire-ground: var(--fire-night); --fire-surface: var(--fire-sea); --fire-on-surface: var(--fire-sand); --fire-on-surface-muted: #e3dcb8;
    --fire-shadow: #0f0b0a; --fire-edge: #0f0b0a; --fire-line: rgb(252 247 197 / .16); --fire-fill: rgb(252 247 197 / .08); --fire-fill-2: rgb(252 247 197 / .16);
    --fire-loud-shadow: #0f0b0a;
  }
}
:root[data-theme="dark"] {
  --fire-ground: var(--fire-night); --fire-surface: var(--fire-sea); --fire-on-surface: var(--fire-sand); --fire-on-surface-muted: #e3dcb8;
  --fire-shadow: #0f0b0a; --fire-edge: #0f0b0a; --fire-line: rgb(252 247 197 / .16); --fire-fill: rgb(252 247 197 / .08); --fire-fill-2: rgb(252 247 197 / .16);
  --fire-loud-shadow: #0f0b0a;
}