/* theme.css — shared design tokens + theme styles for the Treasury Systems portal.
 *
 * Loaded by every dashboard in <head> BEFORE its inline <style> (so a dashboard
 * can still override anything locally). Centralisation option A, phase 2
 * (see CONTEXT.md). Pairs with dashboard-core.js (the shared theme JS).
 *
 * Owns the single source of truth for:
 *   - the :root brand + neutral token palette
 *   - the dark-mode token overrides (html[data-theme="dark"])
 *   - the shared .theme-toggle button (nav dashboards)
 *
 * What stays INLINE in each dashboard: dashboard-specific dark overrides
 * (badges, pill variants, tint rows, heat-cells, policy keys, …) — they vary
 * per dashboard and are not shared.
 *
 * NOTE: employee_dashboard.html keeps its own .theme-toggle (different header layout)
 * and neutralises the nav positioning locally.
 */

:root{
  --teal:#0D5257;--navy:#2C2D65;--burgundy:#9B2242;--orange:#FF9E1B;--magenta:#DB0A5B;
  --steel:#9BB8D3;--green:#00B373;--red:#E03C31;--yellow:#F3D03E;--pink:#EF60A3;--coral:#F06A6A;
  --bg:#F4F5F7;--surface:#ffffff;--surface2:#F9FAFB;
  --text:#1a1a2e;--text-muted:#6B7280;--text-dim:#9CA3AF;
  --border:#E5E7EB;--border-light:#F3F4F6;--chart-grid:#F3F4F6;
}

html[data-theme="dark"]{
  --bg:#0F1216;--surface:#181B21;--surface2:#212630;--text:#E6E8EB;--text-muted:#9BA1AA;--text-dim:#6B727C;
  --border:#2A2F37;--border-light:#21252B;--chart-grid:#272C34;
}

/* Shared theme toggle (nav dashboards). employee_dashboard overrides this locally. */
.theme-toggle{margin-left:auto;align-self:center;flex-shrink:0;background:none;border:none;padding:0 2px 0 16px;color:rgba(255,255,255,0.5);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color 0.15s;}
.theme-toggle:hover{color:#fff;}
.theme-toggle svg{width:17px;height:17px;}
