/* ═══════════════════════════════════════════════════════════════════════════
   TTA DESIGN TOKENS — the ONE palette (Aug 9, 2026 design-system session)

   This file is the single source of truth for color tokens in BOTH repos:
   tta-hub-main/public/css/tokens.css  and  tta-dvi-main/public/tokens.css
   (the DVI copy appends its dialect aliases at the bottom — Hub names are
   canonical). Keep the canonical block IDENTICAL in both copies.

   Why it exists (review 5.3/5.4): the pages had six near-blacks, five
   oranges, three token vocabularies, and a status palette forked between a
   400-weight set and a 500-weight set. Every page now LINKS this file and
   defines only its page-specific extras in its own :root.

   Rules:
   - Load this BEFORE the page's <style> block. A page :root may still
     override a token deliberately, but deleting the page's copy of a
     canonical token is the normal move.
   - LIGHT MODE lives in sidebar.css (html[data-theme="light"] beats :root
     on specificity, so source order never matters). Do not add light values
     here.
   - NEVER write self-referential tokens (--x: var(--x)) in ANY :root —
     that is the S33 computed-value cycle that killed dark mode on three
     pages.
   - Status colors are the 500-weight set (John's ruling: standardize on
     the 500s, the set the DVI board already used).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --orange:       #f97316;
  --orange-dark:  #c2570e;
  --orange-dim:   rgba(249,115,22,0.12);

  /* Surfaces — the one dark ramp (was six near-blacks) */
  --bg:       #0c0e14;
  --bg-card:  #13161f;
  --bg-card2: #1a1e2a;

  /* Borders — three steps */
  --border:        #1f2435;
  --border-light:  #252b3b;
  --border-strong: #3b4252;

  /* Text */
  --text:       #e2e8f0;
  --text-dim:   #94a3b8;
  --text-muted: #64748b;

  /* Status palette — the 500 set (review 5.3) with matching 12% tints */
  --green:      #22c55e;  --green-dim:  rgba(34,197,94,0.12);
  --yellow:     #eab308;  --yellow-dim: rgba(234,179,8,0.12);
  --red:        #ef4444;  --red-dim:    rgba(239,68,68,0.12);
  --blue:       #3b82f6;  --blue-dim:   rgba(59,130,246,0.12);
  --purple:     #a78bfa;  --purple-dim: rgba(167,139,250,0.12);

  /* Legacy shorthand aliases (maintenance.html / tools.html vocabulary).
     Aliases reference the canonical var, so the light-mode override of the
     base token flips these too. */
  --border-lt: var(--border-light);
  --orange-dk: var(--orange-dark);
}

/* ─── SCROLLBARS — one treatment, every page (Aug 12, review 5.6) ───────────
   Nine Hub pages styled the WebKit pseudo-element, eighteen set Firefox's
   scrollbar-width, and only three ever set scrollbar-color — so most pages
   rendered a thin scrollbar in the browser's DEFAULT light colours on a dark
   page. Defined here because tokens.css is the one stylesheet every real page
   loads (sidebar.css misses dashboard.html and oil-stickers.html).
   It reads --border-light, which the light-mode block in sidebar.css already
   reassigns, so the scrollbar follows the theme with no second rule.
   Per-page ::-webkit-scrollbar copies are now redundant and can be deleted as
   those files are next opened for another reason — they override this
   harmlessly until then. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
::-webkit-scrollbar-corner { background: transparent; }