:root {
  --brand-primary: #0ea5e9;
  --brand-accent:  #0284c7;
  --bg:            #f8fafc;
  --bg-card:       #ffffff;
  --text:          #0f172a;
  --text-muted:    #64748b;
  --border:        #e2e8f0;
}
html.dark {
  --bg:            #0f172a;
  --bg-card:       #1e293b;
  --text:          #f1f5f9;
  --text-muted:    #94a3b8;
  --border:        #334155;
}
/* utilitarios pra usar var direto */
.bg-surface       { background: var(--bg); }
.bg-card          { background: var(--bg-card); }
.text-default     { color: var(--text); }
.text-muted       { color: var(--text-muted); }
.border-default   { border-color: var(--border); }
/* gradient stat cards */
.stat-blue    { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
.stat-green   { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.stat-amber   { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.stat-cyan    { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; }
.stat-rose    { background: linear-gradient(135deg, #f43f5e, #e11d48); color: #fff; }
.stat-violet  { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; }