/* ════════════════════════════════════════════════════════════════════════
   SGD Bot — shared staff-tool design tokens.

   The single source of truth for the internal dark-tool palette (colors +
   type). Before this file, every staff tool (pm, queue, partgen, admin,
   store-admin, photomap, production, books, customers, text, automations,
   gear, kits, job) defined its own copy of these same values under two
   near-identical but differently-named conventions — a color tweak meant
   editing 10+ files, and small drift had already crept in (slightly
   different reds/greens per tool).

   HOW TO USE: link this file in <head>, then in the page's own <style>
   block, alias its LOCAL variable names to these tokens instead of hex
   literals — e.g. a page using --canvas/--surface keeps those names (so
   none of its existing CSS rules need to change) but sets
   `--canvas: var(--sgd-canvas)` instead of `--canvas: #0a0a0a`. One edit
   here now changes the value everywhere that aliases it.

   Deliberately NOT applied to: Calendar and Intake (both light-themed by
   choice — Calendar's is an explicit "Calendly-style" design decision,
   Intake's predates this file and was left alone rather than guessed at),
   proofgen/prodgen (intentionally paper-white — they're previewing an
   actual printed page), and every customer-facing page (book, myinstall,
   mymeeting, myorder, quote, wrap-quote, shop, proof-portal, vip — already
   a consistent light family per an earlier audit, out of scope here).

   Colors are anchored to BRAND.md's HARD RULE (black #0a0a0a, yellow
   #f7ec00) — everything else (the surface/line/text ramp, semantic
   good/warn/red/blue) is this project's internal-tool convention, since
   BRAND.md itself only governs customer-facing material.

   LIGHT / DARK MODE: dark is the default (:root, below — matches how every
   tool looked before this existed). A light alternative activates
   automatically via the OS/browser's prefers-color-scheme, and can be
   forced either way per device — pairs with theme-init.js (applies a
   stored override before first paint, so there's no flash of the wrong
   theme) and shared/nav.js (the Auto/Light/Dark toggle in the tools panel).
   The light palette is NOT a naive invert — the semantic colors (good/warn/
   red/blue) are deepened for real contrast against a white ground; a
   straight hex-invert of the dark-mode versions would wash out on paper-
   white backgrounds. The yellow accent is identical in both modes — it's
   BRAND.md's hard rule, not a themeable value.

   DARK-MODE CONTRAST: canvas/surface/ink are NOT BRAND.md's raw black
   (#0a0a0a) / white — near-black against near-white is ~18:1 contrast,
   which is technically fine by WCAG but reads as glare/halation over a
   full workday on a big monitor (the reason Material Design's dark theme
   spec caps surfaces at #121212 and text at ~87% white rather than true
   black/white). Softened to those numbers everywhere this file is aliased
   — every staff tool at once, one edit. Semantic colors and the yellow
   accent are untouched; this only affects the neutral background/text
   ramp. Customer-facing pages don't alias this file (see above) and are
   unaffected — the actual BRAND.md black (#0a0a0a) stays the hard rule
   for anything customer-facing (logo plate, etc).
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* Ground — softened from BRAND.md's raw SGD Black for sustained on-screen
     reading (see DARK-MODE CONTRAST above); the logo/customer-facing black
     itself is untouched. */
  --sgd-canvas: #121212;
  --sgd-surface: #1a1a1a;
  --sgd-surface-raised: #212121;
  --sgd-line: #2c2c2c;

  /* Text — pulled back from near-white for the same reason. */
  --sgd-ink: #e8e8e6;
  --sgd-muted: #9a9a97;
  --sgd-dim: #6b6b68;

  /* Brand accent — from BRAND.md's SGD Yellow + its hover/pressed shade */
  --sgd-yellow: #f7ec00;
  --sgd-yellow-dark: #d8ce00;

  /* Semantic — status colors, distinct from the yellow accent */
  --sgd-good: #30d158;
  --sgd-warn: #ff9f0a;
  --sgd-red: #ff3b30;
  --sgd-blue: #0a84ff;

  /* Type — from BRAND.md's Typography table, with its documented fallbacks */
  --sgd-disp: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --sgd-body: 'Montserrat', system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --sgd-canvas: #f5f5f4;       /* BRAND.md's own "White/near-white" */
    --sgd-surface: #ffffff;
    --sgd-surface-raised: #fbfbf9;
    --sgd-line: #e2e0d8;
    --sgd-ink: #14130f;
    --sgd-muted: #6f6a5c;
    --sgd-dim: #a39d8c;          /* lighter = less prominent, same direction as dark mode's dim */
    --sgd-good: #1f7a3d;
    --sgd-warn: #a8720a;
    --sgd-red: #c0392b;
    --sgd-blue: #0a5fc2;
  }
}

/* Manual per-device override (set by shared/nav.js's Auto/Light/Dark control,
   applied by shared/theme-init.js) — wins over prefers-color-scheme in BOTH
   directions, since these selectors carry higher specificity than the plain
   :root the media query targets. */
:root[data-theme="dark"] {
  --sgd-canvas: #121212; --sgd-surface: #1a1a1a; --sgd-surface-raised: #212121; --sgd-line: #2c2c2c;
  --sgd-ink: #e8e8e6; --sgd-muted: #9a9a97; --sgd-dim: #6b6b68;
  --sgd-good: #30d158; --sgd-warn: #ff9f0a; --sgd-red: #ff3b30; --sgd-blue: #0a84ff;
}
:root[data-theme="light"] {
  --sgd-canvas: #f5f5f4; --sgd-surface: #ffffff; --sgd-surface-raised: #fbfbf9; --sgd-line: #e2e0d8;
  --sgd-ink: #14130f; --sgd-muted: #6f6a5c; --sgd-dim: #a39d8c;
  --sgd-good: #1f7a3d; --sgd-warn: #a8720a; --sgd-red: #c0392b; --sgd-blue: #0a5fc2;
}
