/* ============================================================
   Brokerwise Support Hub — tokens.css (B0)
   Source of truth: Phase 2 UX Plan v2.0 · §4 Design Tokens
   ============================================================ */

:root, [data-bs-theme="light"] {
  --bw-primary: #0B1F3A;
  --bw-primary-rgb: 11, 31, 58;
  --bw-accent: #16A34A;
  --bw-accent-rgb: 22, 163, 74;
  --bw-bg: #F6F8FA;
  --bw-surface: #FFFFFF;
  --bw-surface-2: #F1F4F7;
  --bw-border: #E4E9EF;
  --bw-text: #1A2433;
  --bw-text-muted: #64748B;
  --bw-sidebar-bg: #0B1F3A;
  --bw-sidebar-text: #B9C5D6;
  --bw-shadow-sm: 0 1px 2px rgba(16, 30, 54, .06);
  --bw-shadow-md: 0 4px 14px rgba(16, 30, 54, .10);
  --bw-shadow-lg: 0 12px 32px rgba(16, 30, 54, .16);

  /* Card system */
  --card-pad: 16px;
  --card-pad-lg: 22px;
  --card-radius: 13px;
  --card-gap: 16px;
  --card-border: 1px solid var(--bw-border);
  --card-shadow: 0 1px 2px rgba(16, 30, 54, .04), 0 4px 12px rgba(16, 30, 54, .05);
  --card-shadow-hover: 0 2px 4px rgba(16, 30, 54, .06), 0 10px 24px rgba(16, 30, 54, .10);
}

[data-bs-theme="dark"] {
  --bw-primary: #3B82F6;
  --bw-primary-rgb: 59, 130, 246;
  --bw-accent: #22C55E;
  --bw-accent-rgb: 34, 197, 94;
  --bw-bg: #0D1117;
  --bw-surface: #161B22;
  --bw-surface-2: #1F2630;
  --bw-border: #2D333B;
  --bw-text: #E6EDF3;
  --bw-text-muted: #8B949E;
  --bw-sidebar-bg: #10151C;
  --bw-sidebar-text: #8B949E;
  --bw-shadow-sm: none;
  --bw-shadow-md: none;
  --bw-shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);

  --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .25);
  --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .55);
}

:root {
  /* Status colours — identical both themes (badges use 14% tint bg) */
  --st-new: #6B7280;
  --st-review: #6366F1;
  --st-assigned: #0EA5E9;
  --st-dev: #2563EB;
  --st-devdone: #7C3AED;
  --st-qa: #D97706;
  --st-qafail: #DC2626;
  --st-ready: #0D9488;
  --st-deployed: #059669;
  --st-closed: #16A34A;
  --st-reopened: #DC2626;
  --st-waiting: #EA580C;
  --st-hold: #64748B;
  --st-merged: #9CA3AF;

  /* Priority */
  --pr-critical: #DC2626;
  --pr-high: #EA580C;
  --pr-medium: #D97706;
  --pr-low: #6B7280;

  /* Health grades */
  --hg-a: #16A34A;
  --hg-b: #84CC16;
  --hg-c: #D97706;
  --hg-d: #DC2626;

  /* Escalation levels */
  --esc-l1: #D97706;
  --esc-l2: #EA580C;
  --esc-l3: #DC2626;

  /* Shape */
  --r-input: 8px;
  --r-card: var(--card-radius);
  --r-modal: 14px;
  --field-height: 40px;

  /* Layout */
  --sidebar-w: 240px;
  --sidebar-rail: 64px;
  --topbar-h: 56px;
  --bottomnav-h: 56px;
}

/* ---- Base ---- */
* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  background: var(--bw-bg);
  color: var(--bw-text);
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
}
@media (min-width: 992px) { body { padding-bottom: 0; } }

.font-tabular { font-variant-numeric: tabular-nums; }
.text-muted-2 { color: var(--bw-text-muted) !important; }
a { color: var(--bw-primary); text-decoration: none; }

h1, .h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.section-title {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35;
  margin: 0 0 var(--card-gap); color: var(--bw-text);
}
.caption { font-size: 12px; color: var(--bw-text-muted); }

::selection { background: rgba(var(--bw-accent-rgb), .25); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

:focus-visible { outline: 2px solid var(--bw-primary); outline-offset: 2px; border-radius: 4px; }