/* =============================================================
   SKYD Salary — Design Tokens v2 (2026-05-13)
   Brand: Emerald-700 #047857 (finance-grade green)
   Strategy: forward-compatible new namespace + backward-compat
   aliases over the legacy --color-* variables. Loaded BEFORE
   app.css so the new values become defaults; legacy classes
   pick them up automatically (e.g. var(--color-primary) now
   resolves to the new emerald primary).
   ============================================================= */
:root {
  /* ---------- Brand (new namespace) ---------- */
  --brand-primary:        #047857;   /* emerald-700 */
  --brand-primary-hover:  #065F46;   /* emerald-800 */
  --brand-primary-active: #064E3B;   /* emerald-900 */
  --brand-primary-soft:   #D1FAE5;   /* emerald-100 */
  --brand-primary-tint:   #ECFDF5;   /* emerald-50  */

  /* CTA accent — amber for primary call-to-action moments */
  --accent:               #D97706;   /* amber-600 */
  --accent-hover:         #B45309;   /* amber-700 */
  --accent-soft:          #FEF3C7;   /* amber-100 */

  /* ---------- Surface (page / card backgrounds) ---------- */
  --surface-0: #FFFFFF;
  --surface-1: #F8FAFC;
  --surface-2: #F1F5F9;
  --surface-3: #E2E8F0;
  --surface-4: #CBD5E1;

  /* ---------- Text scale ---------- */
  --text-0:        #0F172A;          /* slate-900 — headings */
  --text-1:        #334155;          /* slate-700 — body */
  --text-2:        #64748B;          /* slate-500 — secondary */
  --text-3:        #94A3B8;          /* slate-400 — placeholder/disabled */
  --text-on-brand: #FFFFFF;

  /* ---------- Status ---------- */
  --status-success:      #16A34A;
  --status-success-soft: #DCFCE7;
  --status-warning:      #D97706;
  --status-warning-soft: #FEF3C7;
  --status-danger:       #DC2626;
  --status-danger-soft:  #FEE2E2;
  --status-info:         #2563EB;
  --status-info-soft:    #DBEAFE;

  /* ---------- Chart palette (8-cat) ---------- */
  --chart-1: #047857;
  --chart-2: #2563EB;
  --chart-3: #D97706;
  --chart-4: #7C3AED;
  --chart-5: #DC2626;
  --chart-6: #0891B2;
  --chart-7: #65A30D;
  --chart-8: #BE185D;

  /* ---------- Typography ---------- */
  --font-ui:    'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, ui-monospace, monospace;
  --font-cn:    'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;

  /* ---------- Spacing (4-base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* ---------- Radius / shadow ---------- */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -1px rgba(15,23,42,.04);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,.10), 0 4px 6px -2px rgba(15,23,42,.04);

  /* =============================================================
     BACKWARD-COMPAT ALIASES
     ─────────────────────────────────────────────────────────────
     Legacy app.css / employee.css / mobile.css / inline styles
     all reference the --color-* namespace. We REWRITE them here
     to the new palette so brand change propagates without an
     audit of 1000+ usage sites.
     ============================================================= */

  /* Brand color → emerald */
  --color-primary:        var(--brand-primary);
  --color-primary-dark:   var(--brand-primary-hover);   /* was Poppins purple #764ba2 */
  --color-primary-rgb:    4, 120, 87;                   /* for rgba() consumers */
  --color-primary-light:  var(--brand-primary-tint);    /* was #eef2ff */

  /* Page / card */
  --color-bg:             var(--surface-1);             /* was #f0f2f5 */
  --color-bg-card:        var(--surface-0);
  --color-bg-elevated:    var(--surface-1);

  /* Text */
  --color-text:           var(--text-0);
  --color-text-secondary: var(--text-2);
  --color-text-muted:     var(--text-3);

  /* Border */
  --color-border:         var(--surface-3);
  --color-border-light:   var(--surface-2);

  /* Status (re-grounded to the new scale, same hex hue) */
  --color-success:        var(--status-success);
  --color-success-light:  var(--status-success-soft);
  --color-success-border: #BBF7D0;
  --color-danger:         var(--status-danger);
  --color-danger-light:   var(--status-danger-soft);
  --color-danger-border:  #FECACA;
  --color-warning:        var(--status-warning);
  --color-warning-light:  var(--status-warning-soft);
  --color-warning-border: #FDE68A;
  --color-info:           var(--status-info);
  --color-info-light:     var(--status-info-soft);
  --color-info-border:    #BFDBFE;

  /* Fonts (legacy names) */
  --font-heading: var(--font-ui);   /* was 'Poppins'; now Inter for unified type */
  --font-body:    var(--font-ui);
}

/* Improved type rendering across platforms (Win7 / macOS / Linux). */
html, body {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  text-rendering: optimizeLegibility;
}
/* Tabular numbers for money / IDs */
.num, .mono, table td.num, table td.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
}