/* ═══════════════════════════════════════════════════════════════════════════
   BRAND TOKENS — the single source of truth for colour in this app.
   Loaded by index.html, login.html, visitor-scanner.html and station.html.

   WHY THIS FILE EXISTS
   --------------------
   The accent green used to be typed literally (#32c800) in ~300 places. A
   one-time find-and-replace wrapped 213 of them in var(--brand,#32c800) but
   missed everything built inside <script> template literals, everything written
   as rgba(50,200,0,…), every other green shade (#2e7d32, #4caf50, #28a745 …)
   and every file other than index.html. Because there was no :root block, a
   developer writing new UI had no token to reach for and honestly typed the hex
   again — so the branding drifted back out by default.

   THE RULE, and it is the whole point of this file:

     --brand-*   FOLLOWS the company's accent colour. Chrome only: sidebar,
                 active nav, borders, dividers, focus rings, headers, and
                 NEUTRAL action buttons (Apply, Save, Add, Search, Submit).

     --ok / --warn / --danger / --info  NEVER change. These carry MEANING.
                 Approved is green, Rejected is red — for every tenant. A
                 company whose accent is red must not get a red Approve button
                 sitting next to a red Reject button.

   So when you colour something new, the question is not "what green was it" but
   "is this chrome or is this meaning". Pick the matching token. Never type a
   hex. `npm run brand-doctor` fails the build if you do.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── BRAND (recoloured per company by applyBranding / QCBrand.apply) ────── */
  /* These MUST equal derive('#32c800') in brand.js / lib/brandTokens.js. When
     branding is off the CSS defaults apply, but window.QC_BRAND still reports
     the derived set — if the two drift, a JS-painted tint and a CSS-painted
     tint sitting side by side come out slightly different shades. */
  --brand:          #32c800;             /* the accent itself                */
  --brand-dark:     #2aa800;             /* hover / pressed / darker edge    */
  --brand-darker:   #1a6800;             /* readable text ON a tint          */
  --brand-light:    #65d640;             /* lighter step, for gradient stops */
  --brand-tint:     #e6f8e0;             /* light background wash            */
  --brand-tint-2:   #f5fcf2;             /* even lighter wash                */
  --brand-contrast: #ffffff;             /* text/icon ON TOP of --brand      */

  /* Alpha layers — these replace the 61 hand-written rgba(50,200,0,…) spots.
     Kept as discrete steps rather than color-mix() so they work in every
     browser this ships to, including the shop-floor kiosk tablets. */
  --brand-a08:  rgba(50, 200, 0, .08);
  --brand-a10:  rgba(50, 200, 0, .10);
  --brand-a12:  rgba(50, 200, 0, .12);
  --brand-a15:  rgba(50, 200, 0, .15);
  --brand-a20:  rgba(50, 200, 0, .20);
  --brand-a25:  rgba(50, 200, 0, .25);
  --brand-a30:  rgba(50, 200, 0, .30);
  --brand-a40:  rgba(50, 200, 0, .40);
  --brand-a50:  rgba(50, 200, 0, .50);
  --brand-a60:  rgba(50, 200, 0, .60);

  /* ── SEMANTIC / STATUS (FIXED — never branded, never derived) ──────────── */
  /* ONE success green. Before this file the app had ten — #32c800, Apple
     #34C759, Tailwind #16a34a/#15803d/#22c55e/#86efac, #43e97b, #51cf66,
     #4ade80, #a7f3a0 — chosen by whoever wrote each screen. "Standardised"
     means a passed check, an approved pass and a closed walkabout are the SAME
     green, so consolidate onto these rather than adding an eleventh. */
  --ok:            #32c800;   /* approved, passed, implemented, in-stock     */
  --ok-dark:       #2aa900;
  --ok-darker:     #1b5e20;   /* status text on --ok-tint                    */
  --ok-soft:       #86efac;   /* pale edge/border of a status chip           */
  --ok-tint:       #e8f5e9;
  --ok-a10:        rgba(50, 200, 0, .10);
  --ok-a12:        rgba(50, 200, 0, .12);
  --ok-a15:        rgba(50, 200, 0, .15);
  --ok-a25:        rgba(50, 200, 0, .25);
  --ok-a30:        rgba(50, 200, 0, .30);
  --ok-a50:        rgba(50, 200, 0, .50);

  --warn:          #f59e0b;   /* pending, awaiting approval, due soon        */
  --warn-tint:     #fff7e6;

  --danger:        #ef4444;   /* rejected, failed, expired, delete           */
  --danger-dark:   #dc2626;
  --danger-tint:   #fee2e2;

  --info:          #60a5fa;   /* in progress, checked-in, informational      */
  --info-dark:     #1d4ed8;
  --info-tint:     #eff6ff;

  --neutral:       #9ca3af;   /* checked-out, closed, inactive               */
  --neutral-tint:  #f3f4f6;

  --gold:          #d4af37;   /* rewarded                                    */
  --purple:        #a78bfa;   /* acknowledged                                */

  /* Walkabout severity's top tier. Deliberately DARKER than --danger rather
     than a new hue: the four severities read as one heat ramp (green → amber →
     red → maroon), so the ordering survives greyscale printing and the common
     red/green colour blindness. Fixed like every other status colour — a
     Catastrophic finding is maroon for every tenant. */
  --sev-catastrophic:      #8B0000;
  --sev-catastrophic-tint: #fde0e0;   /* chip background                     */
  --sev-catastrophic-text: #5c0000;   /* chip text on the tint               */

  /* MOC (>30 days) — a 60-day window for changes that cannot be closed inside
     Minor's 30. Deliberately OFF the green→amber→red heat ramp: MOC is not a
     hotter finding than Minor, it is a longer one, and giving it a ramp colour
     would rank it as a severity it is not. Teal reads as "planned work". */
  --sev-moc:      #0891b2;
  --sev-moc-tint: #cffafe;            /* chip background                     */
  --sev-moc-text: #155e75;            /* chip text on the tint               */

  /* ── CHART SERIES (FIXED) ──────────────────────────────────────────────────
     Charts do NOT follow the accent, by decision. Two reasons: a chart read
     next to last month's printed copy must use the same colours, and a series
     palette derived from one accent stops being distinguishable. chart-1 keeps
     the original green so no existing chart changes appearance. */
  --chart-1: #32c800;   /* primary / single-series          */
  --chart-2: #f59e0b;   /* second series                    */
  --chart-3: #60a5fa;   /* third series                     */
  --chart-4: #a78bfa;   /* fourth series                    */
  --chart-5: #ef4444;   /* fifth series                     */
  --chart-6: #d4af37;   /* sixth series                     */
}