:root{
  --acc:#6366F1; --acc-d:#4F46E5; --acc-rgb:99,102,241;
  --bg:#F7F8FA; --surface:#FFFFFF; --border:#EAECF0;
  --text:#101828; --muted:#667085; --muted-2:#98A2B3;
  --sidebar:#101828; --sidebar-hi:#1D2939;
  --input-bg:#fff; --row-hover:#F9FAFB;
  --radius:14px; --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 4px 16px rgba(16,24,40,.08); --shadow-lg:0 12px 40px rgba(16,24,40,.14);
  --app-bg:var(--bg);
}
html[data-theme="dark"]{
  --bg:#0B0F17; --surface:#151B26; --border:#242C3A;
  --text:#E8EDF4; --muted:#94A3B8; --muted-2:#64748B;
  --sidebar:#080B11; --sidebar-hi:#151B26;
  --input-bg:#1B2330; --row-hover:#1B2330;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 4px 16px rgba(0,0,0,.35); --shadow-lg:0 12px 40px rgba(0,0,0,.5);
}

/* ===== Design system tokens (v74) =====
   Semantic colors are the single source for status/priority/role colors used by the dashboard, ticket page and badges.
   Components read these; admins re-theme only --acc (Settings -> Company branding). */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-pill:999px;
  --fs-xs:11.5px;--fs-sm:12.5px;--fs-md:14px;--fs-lg:16px;--fs-xl:20px;--fs-2xl:26px;
  --z-rail:600;--z-modal:1000;--z-lightbox:3000;--z-toast:4000;
  --c-open:#3B82F6;--c-pending:#F59E0B;--c-resolved:#10B981;--c-closed:#94A3B8;--c-created:#6366F1;
  --c-success:#10B981;--c-warning:#F59E0B;--c-danger:#EF4444;--c-info:#0EA5E9;
  --c-success-bg:#ECFDF5;--c-success-fg:#047857;--c-danger-bg:#FEF2F2;--c-danger-fg:#B91C1C;--c-warning-bg:#FFFBEB;--c-warning-fg:#B45309;--c-info-bg:#ECFEFF;--c-info-fg:#0E7490;
  --role-admin:#4338CA;--role-agent:var(--acc-d);--role-employee:#047857;--role-ai:#0E7490;--role-note:#B45309;
  --focus-ring:0 0 0 3px rgba(var(--acc-rgb),.35);
}
html[data-theme="dark"]{
  --c-success-bg:#12291A;--c-success-fg:#6EE7B7;--c-danger-bg:#331616;--c-danger-fg:#FCA5A5;--c-warning-bg:#2B2410;--c-warning-fg:#FCD34D;--c-info-bg:#0F2A30;--c-info-fg:#67E8F9;
  --role-admin:#A5B4FC;--role-agent:#C7D2FE;--role-employee:#6EE7B7;--role-ai:#67E8F9;--role-note:#FCD34D;
}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}