/*
 * palette.css — single source of truth for all design tokens.
 * Loaded first (via head.php) so every stylesheet can reference these.
 *
 * Roles at a glance
 * ─────────────────────────────────────────────────────────────────
 *  Backgrounds  (dark → light)
 *    --bg-base      deepest bg — result-card fill
 *    --bg-surface   card / panel surfaces
 *    --bg-subtle    inset regions (TEK sub-panel, code blocks)
 *    --bg-input     form input fills
 *    --bg-raised    small raised elements (help button fill)
 *    --bg-hover     hover-state fills
 *
 *  Borders  (strong → faint)
 *    --border        default visible card edge
 *    --border-mid    medium emphasis (highlight cards)
 *    --border-subtle faint dividers / separators
 *
 *  Text  (bright → dim)
 *    --text-primary   headings, key numbers
 *    --text-secondary body text, card values
 *    --text-muted     helper labels, muted prose
 *    --text-dim       secondary labels, captions
 *    --text-dimmer    unit suffixes, result sub-labels
 *
 *  Semantic colours
 *    --accent / --accent-dim / --accent-bg   positive / green
 *    --danger / --danger-dim / --danger-bg   negative / red
 *    --link-color / --link-hover-color       inline links
 *
 *  Typography
 *    --font-base   body font stack
 * ─────────────────────────────────────────────────────────────────
 */

:root {
  /* ── Backgrounds ─────────────────────────────────────────── */
  --bg-base: #0a0a0a; /* deepest — result card fill          */
  --bg-surface: #111111; /* panels, cards, modal                */
  --bg-subtle: #161616; /* inset regions (TEK sub-fields)      */
  --bg-input: #1c1c1c; /* input / select fields               */
  --bg-raised: #212121; /* small raised elements (help btn)    */
  --bg-hover: #282828; /* interactive hover fill              */

  /* ── Borders ─────────────────────────────────────────────── */
  --border: #383838; /* default card / modal edge           */
  --border-mid: #2e2e2e; /* medium — highlight card outlines    */
  --border-subtle: #1e1e1e; /* faint dividers, section separators  */

  /* ── Text ────────────────────────────────────────────────── */
  --text-primary: #f0f0f0; /* headings, key output numbers       */
  --text-secondary: #b8b8b8; /* body text, card values             */
  --text-muted: #808080; /* helper labels, muted prose         */
  --text-dim: #606060; /* secondary labels, captions         */
  --text-dimmer: #484848; /* unit suffixes, result sub-labels   */

  /* ── Accent (positive / green) ───────────────────────────── */
  --accent: #55c173;
  --accent-dim: rgba(85, 193, 115, 0.28);
  --accent-bg: rgba(85, 193, 115, 0.05);

  /* ── Danger (negative / red) ─────────────────────────────── */
  --danger: #e26a6a;
  --danger-dim: rgba(226, 106, 106, 0.28);
  --danger-bg: rgba(226, 106, 106, 0.05);

  /* ── Links ───────────────────────────────────────────────── */
  --link-color: #ffffff;
  --link-hover-color: #e5e5e5;

  /* ── Typography ──────────────────────────────────────────── */
  --font-base: Arial, sans-serif;
}