/* Payroll Design System tokens — generated from tokens.json. Light is default; set <html data-theme="dark"> for dark. */
:root, [data-theme="light"] {
  --surface: #f4f6f8;
  --surface-raised: #ffffff;
  --surface-sunken: #eef1f4;
  --line: #d5dbe1;
  --line-strong: #768696;
  --ink: #1b2a3a;
  --ink-muted: #52667a;
  --brand: #047857;
  --brand-hover: #065f46;
  --brand-soft: #e3f3ec;
  --on-brand: #ffffff;
  --shell: #0f2a44;
  --shell-hover: #1b3d60;
  --shell-ink: #ffffff;
  --shell-ink-muted: #b4c4d6;
  --shell-accent: #34d399;
  --navy: #0f2a44;
  --chart-1: #3b82c4;
  --chart-2: #d47d24;
  --chart-3: #36a263;
  --chart-4: #8b6fd0;
  --chart-5: #7f93a8;
  --link: #0a5cc2;
  --focus: var(--link);
  --positive: #1e7a3c;
  --positive-soft: #e8f5ec;
  --critical: #a34a00;
  --critical-soft: #fdf0e3;
  --negative: #bb2525;
  --negative-soft: #fdecec;
  --info: #0a5cc2;
  --info-soft: #e8f1fc;
  --shadow-card: 0 0 2px rgba(27,42,58,0.16), 0 2px 4px rgba(27,42,58,0.08);
  --shadow-popover: 0 0 4px rgba(27,42,58,0.16), 0 8px 24px rgba(27,42,58,0.16);
}
[data-theme="dark"] {
  --surface: #0e151d;
  --surface-raised: #16202b;
  --surface-sunken: #1c2834;
  --line: #2a3744;
  --line-strong: #6f8296;
  --ink: #e8eef4;
  --ink-muted: #9fb0c1;
  --brand: #34d399;
  --brand-hover: #6ee7b7;
  --brand-soft: #0d3a2d;
  --on-brand: #04281d;
  --shell: #08111b;
  --shell-hover: #152434;
  --shell-ink: #e8eef4;
  --shell-ink-muted: #93a6ba;
  --shell-accent: #34d399;
  --navy: #1f4a75;
  --chart-1: #7fb2ec;
  --chart-2: #f2b25f;
  --chart-3: #6fd49a;
  --chart-4: #b6a1ec;
  --chart-5: #9fb0c1;
  --link: #86bdf7;
  --focus: var(--link);
  --positive: #5fd48a;
  --positive-soft: #12301f;
  --critical: #f5a35a;
  --critical-soft: #3a2510;
  --negative: #ff8f8f;
  --negative-soft: #3d1818;
  --info: #86bdf7;
  --info-soft: #12273f;
  --shadow-card: 0 0 2px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4);
  --shadow-popover: 0 0 4px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.5);
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-lg: 12px;
  --control-cozy: 36px;
  --control-compact: 26px;
  --row-cozy: 44px;
  --row-compact: 32px;
  --shell-height: 48px;
  --font-sans-stack: var(--font-plex-sans, "IBM Plex Sans"), "Segoe UI", system-ui, sans-serif;
  --font-mono-stack: var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, Menlo, monospace;
}

body { background: var(--surface); color: var(--ink); font-family: var(--font-sans-stack); font-size: 14px; line-height: 20px; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }