:root[data-theme="light"] {
  --bg: #FBFBFC;
  --surface: #F4F5F7;
  --surface-hover: #ECEDF0;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --text: #0F172A;
  --text-dim: #64748B;
  --text-faint: #94A3B8;
  --avatar-bg: #E0E7FF;
  --avatar-fg: #3730A3;
  --guest-bg: #FFF7ED;
  --guest-fg: #9A3412;
  --intern-bg: #ECFDF5;
  --intern-fg: #065F46;
  --freelancer-bg: #F5F3FF;
  --freelancer-fg: #4C1D95;
  --service-bg: #ECFEFF;
  --service-fg: #164E63;
  --pill-neutral-bg: #EEF0F4;
  --pill-neutral-fg: #475569;
  --pill-accent-bg: var(--accent-soft);
  --pill-accent-fg: var(--accent-text);
  --pill-warn-bg: #FEF3C7;
  --pill-warn-fg: #92400E;
  --danger: #DC2626;
  --danger-bg: #FEE2E2;
  --bar-track: #E5E7EB;
  --row-hover: #F8FAFC;
  --dept-art:  #EC4899;
  --dept-dev:  #6366F1;
  --dept-mgmt: #0EA5E9;
  --dept-hr:   #14B8A6;
}

:root[data-theme="dark"] {
  --bg: #070C1A;
  --surface: #0C1426;
  --surface-hover: #15203A;
  --border: #162243;
  --border-strong: #1F2F58;
  --text: #DCE6F7;
  --text-dim: #6E82AE;
  --text-faint: #3A4870;
  --avatar-bg: rgba(95,168,224,0.18);
  --avatar-fg: #A6CCEF;
  --guest-bg: rgba(226,176,64,0.16);
  --guest-fg: #E2B040;
  --intern-bg: rgba(52,211,153,0.16);
  --intern-fg: #34D399;
  --freelancer-bg: rgba(167,139,250,0.16);
  --freelancer-fg: #A78BFA;
  --service-bg: rgba(34,211,238,0.16);
  --service-fg: #22D3EE;
  --pill-neutral-bg: #15203A;
  --pill-neutral-fg: #B4C2DD;
  --pill-accent-bg: rgba(95,168,224,0.18);
  --pill-accent-fg: #A6CCEF;
  --pill-warn-bg: rgba(226,176,64,0.16);
  --pill-warn-fg: #E2B040;
  --danger: #E26B6B;
  --danger-bg: rgba(226,107,107,0.12);
  --bar-track: #162243;
  --row-hover: rgba(95,168,224,0.05);
  --dept-art:  #F472B6;
  --dept-dev:  #60A5FA;
  --dept-mgmt: #38BDF8;
  --dept-hr:   #34D399;
}

:root {
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --accent: #5FA8E0;
  --accent-soft: rgba(95,168,224,0.18);
  --accent-text: #A6CCEF;
  --row-h: 48px;
  --pad-x: 14px;
  --r-sm: 3px;
  --r-md: 4px;
  --topbar-h: 61px;
}

:root[data-density="compact"] {
  --row-h: 40px;
  --pad-x: 10px;
}