/* fire.css — the monorepo's shared look (design/README.md), part 2: base element styles (body, h1–h3,
   button, input, textarea, select, kbd, focus ring) and a few classes: button.primary / .quiet / .danger,
   .card, .badge, .bar, .muted, .tint, .kofi. Link it after tokens.css on pages built in this look from the start;
   a page with its own components (Couchtab's phone app and site) links tokens.css alone.
   Canonical here; projects get a copy through `bun design/sync.js`. Edit this file, never a copy. */

/* ── Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--fire-ground); color: var(--fire-ink); font: 15px/1.5 var(--fire-display); }
h1, h2, h3 { font-family: var(--fire-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05; text-wrap: balance; }
a { color: var(--fire-accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--fire-turquoise); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Buttons: pills with a hard shadow; the shadow stays put while the button lifts or presses into it (its offset
   changes by the opposite of the button's move, with the same timing). */
button {
  font: 800 14px var(--fire-display); color: var(--fire-night); background: var(--fire-sand);
  border: 0; border-radius: 999px; padding: 7px 16px; cursor: pointer;
  box-shadow: 4px 4px 0 var(--fire-shadow); transition: transform .12s, box-shadow .12s;
}
button:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--fire-shadow); }
button:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--fire-shadow); }
button:disabled { opacity: .55; cursor: default; box-shadow: none; }
button.primary { background: var(--fire-turquoise); color: var(--fire-night); }
button.quiet { background: none; box-shadow: none; color: var(--fire-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
button.quiet:hover:not(:disabled), button.quiet:active:not(:disabled) { background: var(--fire-fill); box-shadow: none; transform: none; }
button.danger:hover:not(:disabled) { color: var(--fire-night); background: var(--fire-coral); }

/* Fields: pale yellow with near-black text, on the ground and on cards alike; outlined when focused. */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), textarea, select {
  font: inherit; color: var(--fire-night); background: var(--fire-sand); border: 2px solid transparent;
  border-radius: var(--fire-radius); padding: 7px 10px; width: 100%;
}
input::placeholder, textarea::placeholder { color: #5a4d46; opacity: .9; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--fire-turquoise); background: var(--fire-sand); }
.card :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), textarea, select) { background: rgb(41 34 31 / .07); color: var(--fire-on-surface); }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--fire-turquoise); }

/* A card: pale yellow (deep teal at night) with a hard shadow. It sets the text colours for what is inside it, so
   anything written with --fire-ink or --fire-muted reads on it. .tint marks the one to point at. */
.card { --fire-ink: var(--fire-on-surface); --fire-muted: var(--fire-on-surface-muted); --fire-accent: var(--fire-on-surface); --fire-fill: rgb(41 34 31 / .07); --fire-fill-2: rgb(41 34 31 / .14); --fire-line: rgb(41 34 31 / .16);
  color: var(--fire-ink); background: var(--fire-surface); border-radius: var(--fire-radius-card); box-shadow: 6px 6px 0 var(--fire-shadow); }
.tint { background: var(--fire-tint) !important; color: var(--fire-night) !important; }

/* A small label: outlined mono capitals. */
.badge {
  display: inline-block; font: 700 10.5px/1 var(--fire-mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal;
  color: inherit; background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; border-radius: 3px; padding: 4px 6px;
}
/* A loud bar (a page's or popup's header): coral, near-black text. */
.bar { --fire-ink: var(--fire-loud-ink); --fire-muted: var(--fire-loud-ink); --fire-accent: var(--fire-loud-ink); background: var(--fire-loud); color: var(--fire-loud-ink); }
.bar h1 { color: var(--fire-loud-head); }
.bar .muted, .bar a { color: var(--fire-loud-ink); }
.bar button.quiet { color: var(--fire-loud-ink); }
.bar button.quiet:hover:not(:disabled) { color: var(--fire-loud-head); border-color: currentColor; }
/* The same as a block inside a page's column, with a hard shadow. */
.bar.block { border-radius: var(--fire-radius-card); box-shadow: 6px 6px 0 var(--fire-loud-shadow); }
.muted { color: var(--fire-muted); }
/* The Ko-fi pill ("Support me"): coral, a hard shadow; a plain link, no widget script.
   <a class="kofi" href="https://ko-fi.com/piotrtomczyk" target="_blank" rel="noopener" aria-label="Support me on Ko-fi">
   <svg>…the cup (copy it from a page that has it)…</svg>Support me</a> */
.kofi {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 14px 3px 5px; border-radius: 999px;
  background: var(--fire-coral); color: var(--fire-night); border: 0; box-shadow: 4px 4px 0 var(--fire-shadow);
  font: 800 13px/1 var(--fire-display); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; transition: transform .12s, box-shadow .12s;
}
.kofi:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--fire-shadow); }
.kofi:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--fire-shadow); }
.kofi svg { width: 26px; height: 26px; flex: none; }
kbd { font: 12px var(--fire-mono); color: var(--fire-night); background: var(--fire-sand); border-radius: 4px; padding: 1px 6px; }

@media (prefers-reduced-motion: reduce) { button, .kofi { transition: none; } }