/* payrollmanager client — dark, up-market design tokens.
   Distinct palette (deep indigo/charcoal + teal accent) so it is clearly NOT the current payroll
   client. Every component consumes these tokens; never hard-code colors in a page. */
:root {
  /* Surfaces */
  --pm-bg:          #0e1116;
  --pm-bg-elev:     #161b22;
  --pm-surface:     #1b2230;
  --pm-surface-2:   #222b3a;
  --pm-border:      #2c3647;
  --pm-overlay:     rgba(8, 11, 16, 0.66);

  /* Text */
  --pm-text:        #e6edf3;
  --pm-text-muted:  #9aa7b8;
  --pm-text-faint:  #66728a;

  /* Accent (teal) + secondary (violet) */
  --pm-accent:      #2dd4bf;
  --pm-accent-600:  #14b8a6;
  --pm-accent-soft: rgba(45, 212, 191, 0.14);
  --pm-violet:      #8b7cf6;

  /* Status */
  --pm-success:     #3fb950;
  --pm-warning:     #d29922;
  --pm-danger:      #f85149;
  --pm-info:        #58a6ff;

  /* Typography */
  --pm-font:        "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --pm-font-mono:   "JetBrains Mono", "Cascadia Code", monospace;
  --pm-fs-xs: 12px; --pm-fs-sm: 13px; --pm-fs-md: 14px; --pm-fs-lg: 16px;
  --pm-fs-xl: 20px; --pm-fs-2xl: 26px; --pm-fs-3xl: 34px;

  /* Spacing / radius / shadow */
  --pm-sp-1: 4px; --pm-sp-2: 8px; --pm-sp-3: 12px; --pm-sp-4: 16px;
  --pm-sp-5: 24px; --pm-sp-6: 32px; --pm-sp-8: 48px;
  --pm-radius:    10px;
  --pm-radius-sm: 6px;
  --pm-radius-lg: 16px;
  --pm-shadow:    0 8px 28px rgba(0, 0, 0, 0.45);
  --pm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);

  --pm-sidebar-w: 248px;
  --pm-header-h:  60px;
}