/* ═══════════════════════════════════════════════════════════════════════════
   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               */

  /* ── UI KIT TONES (FIXED) ───────────────────────────────────────────────────
     One colour PER status and PER action (user, 11 Sep 2026: "assign each a
     separate colour" — Pass, Approved and Active used to share one green, and
     Assign / Copy / Print one grey, so nothing told them apart). Used only by
     public/kit/qc-ui (badges, action icons, phone-card buttons). Fixed like
     every status colour: never follows Branding. Values are the Tailwind scale
     MES-Lite is built on — solid = the icon/edge (>= 3:1 on white), fg = text
     on the tint (>= 4.5:1), bg = the pale tint.
       status → tone:  pass green · in progress blue · fail red · approved teal ·
       active lime · open sky · pending amber · draft violet · overdue orange ·
       rejected pink · obsolete stone · not in use slate
       checklist type: standard cyan · custom fuchsia · classic indigo
       action → tone:  view blue · edit orange · assign indigo · copy cyan ·
       publish teal · obsolete stone · delete red · approve green · add lime ·
       disable amber · download sky · print violet · close zinc · enable emerald */
  --tone-green-solid:   #15803d; --tone-green-fg:   #166534; --tone-green-bg:   #dcfce7;
  --tone-emerald-solid: #047857; --tone-emerald-fg: #065f46; --tone-emerald-bg: #d1fae5;
  --tone-lime-solid:    #4d7c0f; --tone-lime-fg:    #3f6212; --tone-lime-bg:    #ecfccb;
  --tone-teal-solid:    #0f766e; --tone-teal-fg:    #115e59; --tone-teal-bg:    #ccfbf1;
  --tone-cyan-solid:    #0e7490; --tone-cyan-fg:    #155e75; --tone-cyan-bg:    #cffafe;
  --tone-sky-solid:     #0369a1; --tone-sky-fg:     #075985; --tone-sky-bg:     #e0f2fe;
  --tone-blue-solid:    #2563eb; --tone-blue-fg:    #1e40af; --tone-blue-bg:    #dbeafe;
  --tone-indigo-solid:  #4f46e5; --tone-indigo-fg:  #3730a3; --tone-indigo-bg:  #e0e7ff;
  --tone-violet-solid:  #7c3aed; --tone-violet-fg:  #5b21b6; --tone-violet-bg:  #ede9fe;
  --tone-fuchsia-solid: #a21caf; --tone-fuchsia-fg: #86198f; --tone-fuchsia-bg: #fae8ff;
  --tone-pink-solid:    #db2777; --tone-pink-fg:    #9d174d; --tone-pink-bg:    #fce7f3;
  --tone-red-solid:     #dc2626; --tone-red-fg:     #991b1b; --tone-red-bg:     #fee2e2;
  --tone-orange-solid:  #ea580c; --tone-orange-fg:  #9a3412; --tone-orange-bg:  #ffedd5;
  --tone-amber-solid:   #b45309; --tone-amber-fg:   #92400e; --tone-amber-bg:   #fef3c7;
  --tone-stone-solid:   #78716c; --tone-stone-fg:   #44403c; --tone-stone-bg:   #e7e5e4;
  --tone-slate-solid:   #475569; --tone-slate-fg:   #1e293b; --tone-slate-bg:   #e2e8f0;
  --tone-zinc-solid:    #3f3f46; --tone-zinc-fg:    #27272a; --tone-zinc-bg:    #f4f4f5;

  /* ── FLEET / TRUCK STATUS (FIXED) ──────────────────────────────────────────
     The gate-in → dock → weigh → gate-out ladder. Fixed for every tenant, for
     the same reason as --sev-*: these encode WHERE a truck is in the yard, so
     a red-branded site must not paint TRANSIT in its accent and make position
     indistinguishable from branding. Values are MES-Lite's, so a default-accent
     tenant is visually identical to the source module. EXITED reuses --ok
     because "left the site" is the success state. */
  --truck-expected:  #94a3b8;   /* registered, not yet at the gate            */
  --truck-arrived:   #3b82f6;   /* at the gate                                */
  --truck-transit:   #8b5cf6;   /* dock assigned, driving to the bay          */
  --truck-ops:       #f97316;   /* loading / unloading in progress            */
  --truck-ops-done:  #14b8a6;   /* loading / unloading finished               */
  --truck-exited:    #32c800;   /* off site (same value as --ok)              */

  /* ── 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                     */
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHROME SURFACES — the light/dark switch (header + sidebar ONLY)
   ───────────────────────────────────────────────────────────────────────────
   The third token family, and the only one a VIEWER controls. --brand-* is
   chosen by the company; --ok/--warn/--danger carry meaning and never move;
   --chrome-* is the neutral ground those two are painted ON, and the sun/moon
   button in the header swaps it.

   SCOPE IS DELIBERATE. These are the app's chrome — the fixed header bar, the
   sidebar panel and the header's own avatar dropdown. The CONTENT area is
   light in both themes and is not themed here. Do not reach for these tokens
   to colour a card, a table or a modal: that is a much larger project (73
   tables, every module stylesheet, and Chart.js mirrors in brand.js, where
   var() does nothing because charts paint to <canvas>), and a half-applied
   surface family is exactly how a screen ends up light-on-light.

   THE DARK VALUES BELOW ARE THE EXISTING HARD-CODED ONES, UNCHANGED. With no
   data-theme attribute set, the app renders byte-identical to before this file
   grew this block. Light is purely additive.

   Pairs stay pairs. Every background here has its text colour declared beside
   it, for the reason CLAUDE.md records: overriding half of a matched pair is
   what produces white-on-white. `npm run contrast-doctor` is the gate.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --chrome-bg:            #000000;              /* the fixed header bar        */
  --chrome-bg-2:          #252222;              /* sidebar panel               */

  /* The logo plaque at the top of the sidebar. The Starengts mark ships as TWO
     files, one per theme — the dark one letters "RENG" in WHITE, so on a light
     plaque it would read "STA TS". The light file letters it in BLACK. This is
     copied from SkillApp (frontend/src/utils/platformLogo.js), which also
     records WHY it is two files and not a filter: `invert()` mangles the
     wordmark and shifts the green of the icon.
     A TENANT's own logo follows the theme too. It used to be pinned dark on the
     guess that unknown artwork might letter in white; the only real tenant logo
     here is red ink in a WHITE oval, which that pinning rendered as a blob on
     the dark panel. See the note at .sidebar-logo in index.html. */
  --chrome-logo-plaque:      #252222;
  --chrome-panel:         #2a2a2a;              /* avatar dropdown             */
  --chrome-text:          #FFFFFF;              /* text + icons on the chrome  */
  --chrome-text-muted:    #aaaaaa;              /* secondary text in the panel */

  --chrome-border:        rgba(255,255,255,.08); /* hairline dividers          */
  --chrome-border-dashed: #666666;               /* sidebar section-title rule */
  /* NOTE: there is deliberately NO light override for the accent or for this
     dashed rule. THE THEME CHANGES BACKGROUNDS, NOT BRAND COLOURS. The company
     accent stays exactly the accent in both themes — the hamburger bars, the
     sidebar section titles, the company line under the user's name and the
     dropdown icons are all var(--brand) and must stay that way. Only colours
     that were WHITE flip, because white on a white header is invisible.
     (Yes, #32c800 measures 2.2:1 on white. That is the brand's own choice, and
     the light logo puts the same green on white; it is not ours to override.) */
  --chrome-hover:         rgba(255,255,255,.08); /* nav item hover wash        */
  --chrome-hover-strong:  rgba(255,255,255,.14); /* header icon button hover   */
  --chrome-active:        rgba(255,255,255,.22); /* header icon button pressed */
  --chrome-ring:          #FFFFFF;               /* ring around the avatar     */
  --chrome-shadow:        0 2px 5px rgba(0,0,0,.2);
}

/* Set by the boot script in index.html's <head> BEFORE first paint (reading
   localStorage later means every load flashes dark, then snaps to light). */
html[data-theme="light"] {
  --chrome-bg:            #FFFFFF;
  --chrome-bg-2:          #F5F5F7;
  --chrome-logo-plaque:   #F5F5F7;   /* light file has black lettering */
  --chrome-panel:         #FFFFFF;
  --chrome-text:          #1D1D1F;               /* 18.4:1 on white            */
  --chrome-text-muted:    #6E6E73;               /*  5.1:1 on white            */

  --chrome-border:        rgba(0,0,0,.10);
  --chrome-hover:         rgba(0,0,0,.06);
  --chrome-hover-strong:  rgba(0,0,0,.08);
  --chrome-active:        rgba(0,0,0,.14);
  --chrome-ring:          rgba(0,0,0,.12);
  --chrome-shadow:        0 1px 3px rgba(0,0,0,.10);
}