/* 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 ─────────────────────────────────────────── */
:root {
  /* The palette: the five "Fresh Cut Day" colours and the dark teal that does black's work. */
  --fire-teal: #00a8c6;       /* rails, progress, focus rings; never behind white text */
  --fire-teal-soft: #40c0cb;  /* pills, panels behind pictures */
  --fire-cream: #f9f2e7;
  --fire-lime: #aee239;       /* the main action; text on it is always --fire-deep */
  --fire-green: #8fbe00;      /* "OK" */
  --fire-deep: #1d3b40;

  /* Roles, by day. */
  --fire-ground: var(--fire-cream);
  --fire-surface: #fffbf4;
  --fire-ink: var(--fire-deep);
  --fire-muted: #56706f;      /* 4.8:1 on cream */
  --fire-edge: var(--fire-deep);   /* outlines */
  --fire-shadow: var(--fire-deep); /* flat offset shadows */
  --fire-line: rgb(29 59 64 / .16);
  --fire-fill: rgb(29 59 64 / .07);
  --fire-fill-2: rgb(29 59 64 / .14);
  --fire-accent: #006f84;     /* links and accent text, 5.2:1 on cream */
  --fire-tint: color-mix(in srgb, #aee239 28%, #fffbf4); /* the selected item */
  --fire-ok: #8fbe00;
  --fire-wait: #e9a820;
  --fire-bad: #e5484d;

  --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: 14px;        /* buttons, small cards */
  --fire-radius-card: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fire-ground: #0f2629; --fire-surface: #173438; --fire-ink: var(--fire-cream); --fire-muted: #a7bfbc;
    --fire-edge: #9cc4c0; --fire-shadow: #061416; --fire-line: rgb(249 242 231 / .16);
    --fire-fill: rgb(249 242 231 / .08); --fire-fill-2: rgb(249 242 231 / .16); --fire-accent: var(--fire-teal-soft);
    --fire-tint: color-mix(in srgb, #aee239 12%, #173438);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fire-ground: #0f2629; --fire-surface: #173438; --fire-ink: var(--fire-cream); --fire-muted: #a7bfbc;
  --fire-edge: #9cc4c0; --fire-shadow: #061416; --fire-line: rgb(249 242 231 / .16);
  --fire-fill: rgb(249 242 231 / .08); --fire-fill-2: rgb(249 242 231 / .16); --fire-accent: var(--fire-teal-soft);
  --fire-tint: color-mix(in srgb, #aee239 12%, #173438);
  color-scheme: dark;
}