/* staff-theme.css — the "forest" dark palette shared by the staff pages that
 * use it.
 *
 * WHY THIS EXISTS
 * Scott, 2026-09-07, after the staff-dashboard crawl (see
 * docs/superpowers/plans/2026-09-07-staff-dashboard-crawl.md): the dark
 * forest/sage/gold look with Bebas Neue over Barlow was not one page's
 * design, it was a `:root` block + Google Fonts @import copy-pasted into 14
 * pages with no canonical source (capacity-occupancy, business-reporting,
 * food-orders, laser-tag-products, room-status, estimate-builder,
 * laser-tag-checkin, today-schedule, staff-dashboard, laser-tag-arena-static,
 * waiver-admin, pos, laser-tag-attendant, booking-manager). A fix to one
 * page's palette (a contrast issue, say) silently never reached the other
 * thirteen. This file is that canonical source; the 14 pages `<link>` it
 * themselves (unlike theme.css, which auth-guard.js injects into ~40 pages
 * automatically — this is a DIFFERENT, narrower audience, so it is not
 * folded into theme.css: doing so would apply a dark base palette to every
 * guarded page, not just these 14, and theme.css's own guard tests require
 * every rule there to be scoped to `html[data-theme="light"]` or the toggle).
 *
 * NOT THEME.CSS'S JOB, NOT THIS FILE'S JOB
 * theme.css owns the LIGHT-mode override for these same variable names
 * (`--sage`, `--gold`, `--forest`, `--forest-strong` etc. at
 * theme.css:110-124) via `html[data-theme="light"]`, which outranks a bare
 * `:root` on specificity. This file supplies the DARK values these pages
 * were already hardcoding — dark is unchanged, nothing here touches
 * `data-theme`, and the light override keeps working exactly as before.
 *
 * WHY A UNION, NOT ONE TRUE PALETTE
 * The 14 pages are not one family with typos — they are TWO families
 * ("forest": 10 pages; a "slate/cyan-accent" family: laser-tag-products +
 * waiver-admin) plus a hybrid (laser-tag-attendant borrows --danger/--ok from
 * the slate family) and two "kiosk" variants (laser-tag-arena-static,
 * laser-tag-attendant darken --panel/--panel-solid/--shadow a bit further,
 * deliberately, for a TV/attendant console in a dim room). So this file
 * defines the UNION of every custom property any of the 14 declared, each at
 * its MAJORITY value across the pages that declare it. Every page that needs
 * a genuinely different value (not just a formatting difference — see the
 * outlier table in task-50-report.md) keeps a small `:root` override in its
 * own <style>, loaded AFTER this stylesheet's <link>, so its value wins on
 * source order without restating the rest of the palette. This is
 * deliberate, not leftover duplication — read the report before "cleaning up"
 * one of those page-level overrides.
 *
 * TWO NAMES, SAME COLOUR: --gold and --accent are both #f3c873; --danger and
 * --error are both #ef4444 (at majority). Kept as separate variables rather
 * than aliased/renamed, because renaming would mean editing every page that
 * references the old name — out of scope for a "zero visual change" pass.
 *
 * SHARED COMPONENT RULES: byte-for-byte identical across at least 3 of the 14
 * pages' own <style> blocks. This bar turned out to be strict — the brief's
 * five candidate categories (card/panel, badge/pill, section header, muted
 * text, buttons) produced ZERO qualifying matches; every page invented its
 * own class name and body for those. Only the box-sizing reset (14/14) ended
 * up here — a byte-identical header-branding cluster (.brand/.brand img/
 * .brand h1, food-orders/room-status/staff-dashboard) was tried here too and
 * reverted: this stylesheet is loaded by all 14 pages, not just the three
 * that shared it, and it silently broke a fourth page's header (see the
 * component's own comment further down, and task-50-review.md IMP-2). A
 * component rule needs a caller-side opt-in to live here safely; these
 * three pages keep their copy locally instead. See task-50-report.md for the
 * full survey, including the many close-but-only-2-page "twin" pairs that do
 * NOT qualify and were deliberately left alone in their pages.
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;600;700&family=Bebas+Neue&display=swap');

:root {
  /* --- text / structure ------------------------------------------- */
  --ink: #090c08;
  --sand: #f3efe6;
  --stone: #c6c1b6;

  /* --- surfaces ----------------------------------------------------- */
  --panel: rgba(10, 14, 9, 0.82);
  --panel-solid: #101610;
  --outline: rgba(156, 197, 139, 0.24);
  --shadow: rgba(0, 0, 0, 0.4);

  /* --- fonts ---------------------------------------------------------- */
  --title-font: "Bebas Neue", "Trebuchet MS", sans-serif;
  --body-font: "Barlow", "Trebuchet MS", sans-serif;

  /* --- forest/sage/gold brand accents (10-page "forest" family) ------- */
  --forest: #2f5828;
  --forest-strong: #3f6f36;
  --sage: #9cc58b;
  --gold: #f3c873;

  /* --- status --------------------------------------------------------- */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --error: #ef4444;        /* alias of --danger; business-reporting/estimate-builder use this name instead */

  /* --- slate/cyan-accent family (laser-tag-products, waiver-admin) ---- */
  --slate: #1b2325;
  --accent: #f3c873;       /* same colour as --gold, different name in this family */
  --accent-2: #8cd1ff;
  --muted: #93a0a7;
  --ok: #7bdc85;
  --border: rgba(255, 255, 255, 0.08);
  --warn: #f0b469;         /* majority of the pages that use this short name (2 of 3) */
}

/* ================================================================== */
/* SHARED COMPONENT RULES (>= 3 pages, byte-identical)                 */
/* ================================================================== */

* {
  box-sizing: border-box;
}

/* Review follow-up (task-50-review.md IMP-2): .brand/.brand img/.brand h1
 * used to live here. It was byte-identical across food-orders, room-status
 * and staff-dashboard, but this stylesheet is loaded by all 14 pages, and a
 * bare class selector reaches ANY page with matching markup, not just the
 * three it was written for. laser-tag-arena-static and laser-tag-attendant
 * both build a header from <div class="brand"><img><h1>...</h1></div> for
 * their own, unrelated reasons -- arena-static had no .brand h1 of its own
 * and silently lost its larger title to this rule (fixed in
 * laser-tag-arena-static.html; see the DOM test that pins it). Moved back
 * into the three pages that actually share it -- a component rule with no
 * caller-side scoping mechanism (unlike the :root variables, which are
 * genuinely global by design) does not belong in a stylesheet every page
 * links. */