/* ============================================================
   IMATA Payroll – Design Tokens
   All colour, spacing, radius and shadow variables live here.
   Never hard-code a colour outside this file.
   ============================================================ */

:root {
  /* Brand */
  --navy-900: #0F172A;
  --navy-800: #1E293B;
  --navy-700: #334155;
  --orange-500: #F7931A;
  --orange-600: #E07F0A;
  --orange-700: #B45309;
  --orange-50:  #FEF4E4;

  /* Page background gradient */
  --page-bg-from: #F1F5F9;
  --page-bg-to:   #CBD5E1;

  /* Surfaces */
  --canvas:       #F8FAFC;
  --surface:      #FFFFFF;
  --surface-muted:#F1F5F9;
  --border:       #E2E8F0;

  /* Text */
  --text:         #0F172A;
  --text-muted:   #64748B;

  /* Status – always paired (text on bg) */
  --success:      #15803D;  --success-bg: #DCFCE7;
  --warning:      #B45309;  --warning-bg: #FEF3C7;
  --danger:       #B91C1C;  --danger-bg:  #FEE2E2;
  --neutral:      #334155;  --neutral-bg: #E2E8F0;

  /* Radius */
  --radius-canvas:  28px;
  --radius-card:    20px;
  --radius-control: 12px;
  --radius-chip:    8px;

  /* Shadows */
  --shadow-card:  0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
  --shadow-float: 0 16px 48px rgba(15,23,42,.18);

  /* Typography */
  --font: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --sidebar-w: 272px;
  --sidebar-collapsed-w: 80px;
  --topbar-h: 80px;
}

/* ── Dark theme overrides ── */
[data-theme="dark"] {
  --page-bg-from: #020617;
  --page-bg-to:   #0B1220;
  --canvas:       #0B1220;
  --surface:      #111B2E;
  --surface-muted:#1E293B;
  --border:       #1E293B;
  --text:         #F1F5F9;
  --text-muted:   #94A3B8;

  --success-bg: rgba(21,128,61,.16);
  --warning-bg: rgba(180,83,9,.16);
  --danger-bg:  rgba(185,28,28,.16);
  --neutral-bg: rgba(51,65,85,.4);
}