/* ══════════════════════════════════════════════════════════════
   Design Tokens — Colours
   Extracted from shoot/v0.4/style.css :root + v0.8a additions
══════════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --bg-primary:   #080c10;
  --bg-surface:   #0f1520;
  --bg-raised:    #162030;
  --bg-selected:  #1e2d44;

  /* Faction A (left / first deployer) */
  --faction-a:             #00d4ff;
  --faction-a-dim:         #0088aa;
  --faction-a-stroke-idle: #00aacc;     /* per-model idle stroke (pre-UX5 baseline) */
  --faction-a-tint:        #00d4ff14;
  --faction-a-tint2:       #00d4ff22;

  /* Faction B (right / second deployer) */
  --faction-b:             #ff4020;
  --faction-b-dim:         #aa2810;
  --faction-b-stroke-idle: #cc3818;     /* per-model idle stroke (pre-UX5 baseline) */
  --faction-b-tint:        #ff402012;

  /* Text hierarchy */
  --text-primary: #e0e8f0;
  --text-sec:     #8090a0;
  --text-muted:   #4a6080;
  --text-dis:     #2a3a4a;

  /* States */
  --bs:           #cc2020;
  --bs-tint:      #cc202015;
  --strat:        #cc8800;
  --strat-tint:   #cc880015;
  --strat-dim:    #886000;

  /* Compat aliases used by shared JS */
  --bg:           #080c10;
  --panel:        #0f1520;
  --border:       #1a2535;
  --gold:         #c9a352;
  --gold-dim:     #5a4a28;
  --text:         #e0e8f0;
  --text-dim:     #8090a0;
  --teal:         #00d4ff;
  --blue:         #1e7acc;
  /* Mockup-era aliases — some shared CSS (overlays.css save-alloc buttons)
     still references the old `--imp` / `--imp-dim` tokens from the mockup
     stylesheets. Alias them to the faction-A cyan so those buttons render. */
  --imp:          #00d4ff;
  --imp-dim:      #0088aa;
  --red-enemy:    #ff4020;
  --red-alert:    #cc2020;
  --amber-end:    #cc8800;
  --white:        #ffffff;

  /* v0.8a spent-state tokens */
  --spent:        #8a98ab;
  --spent-dim:    #5f6d80;
  --spent-tint:   rgba(138,152,171,.12);
  --spent-tint-2: rgba(138,152,171,.2);

  /* Hover / focus glow — faction-aware via color-mix. Single source for
     button hover effects across chrome. Derived from --faction-a/--faction-b
     so they rebind automatically when applyFactionChromePalette() writes
     inline-style overrides for --faction-a/b on :root. */
  --faction-a-glow:        color-mix(in srgb, var(--faction-a) 45%, transparent);
  --faction-a-glow-strong: color-mix(in srgb, var(--faction-a) 65%, transparent);
  --faction-b-glow:        color-mix(in srgb, var(--faction-b) 45%, transparent);
  --faction-b-glow-strong: color-mix(in srgb, var(--faction-b) 65%, transparent);

  /* ── Contextual faction tokens ─────────────────────────────────
     Three scopes: --faction-a/b are absolute side IDs; --active-faction
     follows whichever player's TURN it is (set by body.active-side-{a,b}
     toggled in scene-registry → refreshFactionUI on every
     ui:active-faction-changed event); --owning-faction defaults to active
     and is overridden on .side-a / .side-b ancestors so per-unit popups
     resolve to the OWNER's color via the cascade. */
  --active-faction: var(--faction-a);
  --owning-faction: var(--active-faction);
  --enemy-faction:  var(--faction-b);

  /* Derived owning-faction tokens — saves ~30 inline color-mix sites
     across the chrome. The mix happens at the use site so the resolved
     color tracks wherever --owning-faction lands in the cascade. */
  --owning-faction-tint:        color-mix(in srgb, var(--owning-faction) 18%, transparent);
  --owning-faction-tint-strong: color-mix(in srgb, var(--owning-faction) 35%, transparent);
  --owning-faction-glow:        color-mix(in srgb, var(--owning-faction) 45%, transparent);
  --owning-faction-glow-strong: color-mix(in srgb, var(--owning-faction) 65%, transparent);

  /* Active-faction derivatives — same 18% / 45% mixes the chrome uses. */
  --active-faction-tint: color-mix(in srgb, var(--active-faction) 18%, transparent);
  --active-faction-glow: color-mix(in srgb, var(--active-faction) 45%, transparent);

  /* Faction-INDEPENDENT cues. --destructive: red alert / cancel.
     --action: orange transient-action (pile-in / consolidate / charge-target). */
  --destructive:        #cc2020;
  --destructive-tint:   rgba(204, 32, 32, 0.12);
  --action:             #ff8c00;
  --action-tint:        rgba(255, 140, 0, 0.12);
  --action-glow:        rgba(255, 140, 0, 0.5);

  /* ── Z-index scale ────────────────────────────────────────
     Single source of truth for layering. Use these custom
     properties instead of raw literals so the math is
     reviewable in one place. Conceptually:

        board    — game-world layer (battlefield, terrain, models)
        overlay  — chrome that floats over the board (vp-bar,
                   phase-header, action-bar, range badges)
        modal    — modal dialogs / overlays / pause menu
        toast    — banner-toasts region + transient announcements
        curtain  — full-screen interstitials, scenario intro,
                   error banners
  */
  --z-board:       1;
  --z-overlay:    50;
  --z-modal:     100;
  --z-toast:     200;
  /* Tooltip — above #roll-overlay (250) so keyword tooltips hovered
     inside the weapon-select popup read above it. */
  --z-tooltip:   260;
  --z-curtain:  9999;
}

/* ── Active-side declarative rebinding ──────────────────────────────
   `scene-registry.refreshFactionUI()` toggles `body.active-side-{a,b}`
   on every `ui:active-faction-changed` event. CSS rebinds --active-faction
   + --enemy-faction declaratively from there. The derived `-tint` / `-glow`
   tokens MUST be redeclared here too — custom properties inherit their
   *computed* value, so the :root versions captured cyan-glow once and the
   var() inside is NOT re-evaluated when active-side-* rebinds the input. */
body.active-side-a {
  --active-faction: var(--faction-a);
  --enemy-faction:  var(--faction-b);
  --active-faction-tint: color-mix(in srgb, var(--faction-a) 18%, transparent);
  --active-faction-glow: color-mix(in srgb, var(--faction-a) 45%, transparent);
}
body.active-side-b {
  --active-faction: var(--faction-b);
  --enemy-faction:  var(--faction-a);
  --active-faction-tint: color-mix(in srgb, var(--faction-b) 18%, transparent);
  --active-faction-glow: color-mix(in srgb, var(--faction-b) 45%, transparent);
}

/* Side-scoping: any descendant of .side-a / .side-b inherits the matching
   --owning-faction. Author per-unit popups / cards / tooltips with these
   classes; same redeclaration trap applies to the derived tokens. */
.side-a {
  --owning-faction: var(--faction-a);
  --enemy-faction:  var(--faction-b);
  --owning-faction-tint:        color-mix(in srgb, var(--faction-a) 18%, transparent);
  --owning-faction-tint-strong: color-mix(in srgb, var(--faction-a) 35%, transparent);
  --owning-faction-glow:        color-mix(in srgb, var(--faction-a) 45%, transparent);
  --owning-faction-glow-strong: color-mix(in srgb, var(--faction-a) 65%, transparent);
}
.side-b {
  --owning-faction: var(--faction-b);
  --enemy-faction:  var(--faction-a);
  --owning-faction-tint:        color-mix(in srgb, var(--faction-b) 18%, transparent);
  --owning-faction-tint-strong: color-mix(in srgb, var(--faction-b) 35%, transparent);
  --owning-faction-glow:        color-mix(in srgb, var(--faction-b) 45%, transparent);
  --owning-faction-glow-strong: color-mix(in srgb, var(--faction-b) 65%, transparent);
}

/* Legacy aliases for SVG <g> elements painted by objective-visuals.js where
   wrapping in .side-a/.side-b isn't structurally feasible (held-side flips
   per round, no stable parent). */
.obj-held-a, .obj-priority-a { --owning-faction: var(--faction-a); }
.obj-held-b, .obj-priority-b { --owning-faction: var(--faction-b); }

/* Start-screen + scenario-intro palette override — applyFactionChromePalette()
   only runs after a fixture loads, so the entry gate + main menu and the
   cold-open curtain sit at the :root cyan defaults until G hydrates. The
   curtain pin matters because the loading spinner inside #scenario-intro
   reads var(--faction-a) for its border-top — without this scope it shows
   light-blue for the first ~300ms before the scenario palette binds.
   When multi-scenario lands, replace the pin with per-scenario palettes
   scoped via body[data-scenario-id="…"] #scenario-intro. */
#screen-start,
#scenario-intro {
  --faction-a:             #ffcc33;
  --faction-a-dim:         #a07f1f;
  --faction-a-stroke-idle: #c69e22;
  --faction-a-tint:        #ffcc3318;
  --faction-a-tint2:       #ffcc3322;
  --faction-a-glow:        color-mix(in srgb, var(--faction-a) 45%, transparent);
  --faction-a-glow-strong: color-mix(in srgb, var(--faction-a) 65%, transparent);
}