/* 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, .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-body); }
h1, h2, h3 { font-family: var(--fire-display); letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
h1 { font-weight: 800; }
h2, h3 { font-weight: 750; }
a { color: var(--fire-accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--fire-teal); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Buttons: an outline and a flat shadow; they press into it. */
button {
  font: 600 14px var(--fire-body); color: var(--fire-ink); background: var(--fire-surface);
  border: 2px solid var(--fire-edge); border-radius: 12px; padding: 6px 14px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--fire-shadow); transition: transform .12s, box-shadow .12s;
}
button:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--fire-shadow); }
button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--fire-shadow); }
button:disabled { opacity: .55; cursor: default; box-shadow: none; }
button.primary { background: var(--fire-lime); color: var(--fire-deep); }
button.quiet { background: none; border-color: transparent; box-shadow: none; color: var(--fire-muted); }
button.quiet:hover:not(:disabled) { color: var(--fire-ink); border-color: var(--fire-line); box-shadow: none; transform: none; }
button.danger:hover:not(:disabled) { color: var(--fire-bad); border-color: var(--fire-bad); }

/* Fields: a quiet fill, outlined in teal when focused. */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), textarea, select {
  font: inherit; color: var(--fire-ink); background: var(--fire-fill); border: 2px solid transparent;
  border-radius: 10px; padding: 7px 10px; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--fire-muted); opacity: .85; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--fire-teal); background: var(--fire-surface); }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--fire-teal); }

/* A card: outlined, with the flat shadow. .tint marks the one to point at (the selected item). */
.card { background: var(--fire-surface); border: 2px solid var(--fire-edge); border-radius: var(--fire-radius-card); box-shadow: 5px 5px 0 var(--fire-shadow); }
.tint { background: var(--fire-tint) !important; }

/* A small label in a pill. */
.badge {
  display: inline-block; font: 700 10.5px/1 var(--fire-mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal;
  color: var(--fire-deep); background: var(--fire-teal-soft); border: 1.5px solid var(--fire-edge); border-radius: 999px; padding: 3px 7px;
}
.muted { color: var(--fire-muted); }
/* The Ko-fi pill ("Support me"): teal-soft, outlined, a flat 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-teal-soft); color: var(--fire-deep); border: 2px solid var(--fire-edge); box-shadow: 3px 3px 0 var(--fire-shadow);
  font: 700 13px/1 var(--fire-body); text-decoration: none; transition: transform .12s, box-shadow .12s;
}
.kofi:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--fire-shadow); }
.kofi:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--fire-shadow); }
.kofi svg { width: 26px; height: 26px; flex: none; }
kbd { font: 12px var(--fire-mono); background: var(--fire-surface); border: 1.5px solid var(--fire-edge); border-radius: 6px; padding: 0 5px; }

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