/* ═══════════════════════════════════════════════════════════════════
   DeputyWise — Fluent ↔ Brand Token Bridge
   Issue #85 · WI-03

   FluentDesignTheme (CustomColor="#2D6A9F") auto-generates accent-*
   and neutral-* tokens from the brand secondary colour.  This file
   bridges any Fluent design tokens that need explicit mapping to
   brand tokens, and maps brand semantic aliases to the live Fluent
   values so both systems stay in sync.

   Load order in App.razor:
     reboot.css → brand-tokens.css → fluent-theme-bridge.css
       → scoped styles → app.css
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ← Fluent bridges ─────────────────────────────────────
     Map brand semantic tokens to the Fluent accent system so that
     custom components using --brand-* stay consistent with Fluent
     components that use --accent-*.                                */
  --cta-bg: var(--accent-fill-rest, var(--brand-secondary));
  --selected-state: var(--accent-fill-rest, var(--brand-secondary));
  --link-color: var(--accent-fill-rest, var(--brand-secondary));
  --decorative-highlight: var(--accent-fill-rest, var(--brand-secondary));

  /* ── Surface alignment ──────────────────────────────────────────
     Fluent neutral-layer-* tokens define page/card surfaces.
     Fallback to brand tokens if Fluent hasn't initialised yet
     (static SSR before JS runs).                                  */
  --brand-surface: var(--neutral-layer-1, var(--brand-background));
}