:root{
  --background:0 0% 100%; --foreground:222 47% 11%;
  --card:0 0% 100%; --card-foreground:222 47% 11%;
  --popover:0 0% 100%; --popover-foreground:222 47% 11%;
  --primary:243 75% 59%; --primary-foreground:0 0% 100%;
  --secondary:222 18% 95%; --secondary-foreground:222 47% 11%;
  --muted:210 40% 96%; --muted-foreground:215 16% 47%;
  --accent:210 40% 96%; --accent-foreground:222 47% 11%;
  --destructive:0 72% 51%; --destructive-foreground:0 0% 100%;
  --success:142 71% 45%; --success-foreground:0 0% 100%;
  --warning:38 92% 50%; --warning-foreground:222 47% 11%;
  --info:199 89% 48%; --info-foreground:0 0% 100%;
  --border:214 32% 91%; --input:214 32% 91%; --ring:239 84% 67%;
  --ai:262 83% 58%; --ai-foreground:0 0% 100%;
  --suite:239 84% 67%;                /* default = HDPulseAI indigo */
  --radius:0.625rem; --control:2.5rem; --row-py:0.45rem;
  --status-new:221 83% 53%; --status-open:262 83% 58%; --status-pending:38 92% 50%;
  --status-resolved:142 71% 45%; --status-closed:215 16% 47%;
  --priority-low:142 71% 45%; --priority-medium:38 92% 50%;
  --priority-high:25 95% 53%; --priority-urgent:0 72% 51%;
  --sla-ok:142 71% 45%; --sla-warn:38 92% 50%; --sla-breach:0 72% 51%;
  --font-sans:Inter,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
}
[data-theme="dark"],.dark{
  --background:222 47% 7%; --foreground:210 40% 96%;
  --card:222 44% 10%; --card-foreground:210 40% 96%;
  --popover:222 44% 10%; --popover-foreground:210 40% 96%;
  --primary:239 84% 67%; --primary-foreground:222 47% 11%;
  --secondary:217 33% 17%; --secondary-foreground:210 40% 96%;
  --muted:217 33% 17%; --muted-foreground:215 20% 65%;
  --accent:217 33% 17%; --accent-foreground:210 40% 96%;
  --border:217 33% 20%; --input:217 33% 20%; --ring:239 84% 67%;
}
/* per-suite accent: flows into --primary / --ring / --suite */
[data-suite="ai"]{   --suite:262 83% 58%; --primary:262 83% 58%; --ring:262 83% 58%; }
[data-suite="comm"]{ --suite:221 83% 53%; --primary:221 83% 53%; --ring:221 83% 53%; }
[data-suite="hc"]{   --suite:175 84% 32%; --primary:175 84% 32%; --ring:175 84% 32%; }
/* WM amber: white text on amber-600 is only 3.15:1 (fails WCAG AA). Keep the brand amber
   shade but pair it with a DARK foreground — near-black on amber-600 is ~6.7:1 (passes AA
   in both themes). See Sage-Screen-Element-UX-Matrix §A suite-accent contrast note. */
[data-suite="wm"]{   --suite:32 95% 44%;  --primary:32 95% 44%;  --ring:32 95% 44%;  --primary-foreground:222 47% 11%;  }
[data-density="compact"]{ --control:2rem; --radius:0.5rem; --row-py:0.3rem; }
html{font-family:var(--font-sans);}
/* Density-driven data-table row height: vertical cell padding (comfortable 0.45rem, compact 0.30rem). Tune --row-py. */
.sage-table td, .sage-table th{ padding-top:var(--row-py); padding-bottom:var(--row-py); }
/* Compact mode shrinks row avatars so rows can get tighter (the content floor, not just padding). */
[data-density="compact"] .sage-row-avatar{ height:1.25rem; width:1.25rem; }
/* Responsive data tables: reflow to labelled cards below the sm breakpoint (640px).
   Usage: add class "sage-table" to <table> and a data-label="Column" on each <td>
   (use data-label="" for checkbox/actions cells). */
@media (max-width:639px){
  .sage-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  .sage-table tr{display:block;border:1px solid hsl(var(--border));border-radius:0.5rem;margin-bottom:0.5rem;}
  .sage-table td{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.5rem 0.75rem;text-align:right;}
  .sage-table td::before{content:attr(data-label);font-weight:500;color:hsl(var(--muted-foreground));text-align:left;}
  .sage-table td[data-label=""]::before{content:none;}
  .sage-table td[data-label=""]{justify-content:flex-end;}
}