/* ==========================================================================
   DIALLO HRMS — CSS VARIABLES & DESIGN TOKENS
   Theme: White + Blue Enterprise SaaS
   Supports: Light (Default) and Dark Theme via [data-theme="dark"]
   ========================================================================== */

:root {
  /* Brand Primary Colors (Blue System) */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb; /* Primary Brand Blue */
  --primary-700: #1d4ed8; /* Darker Blue */
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --primary-950: #172554;

  /* Primary Brand Alias */
  --primary: var(--primary-600);
  --primary-hover: var(--primary-700);
  --primary-light: var(--primary-50);
  --primary-soft: rgba(37, 99, 235, 0.08);
  --primary-border: rgba(37, 99, 235, 0.2);

  /* Module Accent Colors (Subtle Accents) */
  --accent-dashboard: #2563eb;
  --accent-people: #7c3aed;
  --accent-attendance: #0891b2;
  --accent-leave: #16a34a;
  --accent-payroll: #ea580c;
  --accent-ess: #db2777;
  --accent-comms: #0d9488;
  --accent-reports: #2563eb;
  --accent-admin: #dc2626;
  --accent-settings: #4f46e5;
  --accent-billing: #0284c7;

  /* Status Colors */
  --success: #16a34a;
  --success-light: #f0fdf4;
  --success-border: #bbf7d0;
  --success-text: #15803d;

  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --warning-border: #fde68a;
  --warning-text: #b45309;

  --danger: #dc2626;
  --danger-light: #fef2f2;
  --danger-border: #fecaca;
  --danger-text: #b91c1c;

  --info: #0284c7;
  --info-light: #f0f9ff;
  --info-border: #bae6fd;
  --info-text: #0369a1;

  /* LIGHT THEME (Default: 70-80% White, 10-20% Light Grey, 5-10% Blue) */
  --bg-app: #f8fafc;
  --bg-sidebar: #ffffff;
  --bg-header: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #fbfcfe;
  --bg-input: #ffffff;
  --bg-hover: #f1f5f9;
  --bg-active: #eff6ff;
  --bg-modal: #ffffff;
  --bg-dropdown: #ffffff;
  --bg-table-header: #f8fafc;
  --bg-table-row-hover: #f8fafc;
  --bg-table-stripe: #fafbfc;
  --bg-badge: #f1f5f9;
  --bg-overlay: rgba(15, 23, 42, 0.5);

  /* Surface & Body Aliases */
  --bg-body: var(--bg-app);
  --bg-surface: var(--bg-card);
  --font-family-base: var(--font-family);

  /* Text Colors */
  --text-main: #0f172a;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  /* Border Colors */
  --border-light: #f1f5f9;
  --border-main: #e2e8f0;
  --border-dark: #cbd5e1;
  --border-focus: #2563eb;

  /* Shadows (Soft Enterprise SaaS) */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02);

  /* Sizing & Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --header-height: 64px;
  --transition-speed: 0.2s;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography Stack */
  --font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}

/* ==========================================================================
   DARK THEME SYSTEM
   True Black / Deep Charcoal Grey Surfaces with Pure Crisp White & Bright Silver Text
   ========================================================================== */
[data-theme="dark"] {
  --primary-light: rgba(59, 130, 246, 0.2);
  --primary-soft: rgba(59, 130, 246, 0.15);
  --primary-border: rgba(59, 130, 246, 0.45);

  /* Dark Theme Surfaces: True Black & Sleek Charcoal Grey */
  --bg-app: #090a0d;
  --bg-sidebar: #0f1115;
  --bg-header: #0f1115;
  --bg-card: #16181e;
  --bg-card-hover: #1e2129;
  --bg-input: #0f1115;
  --bg-hover: #1e2129;
  --bg-active: rgba(59, 130, 246, 0.25);
  --bg-modal: #16181e;
  --bg-dropdown: #16181e;
  --bg-table-header: #0f1115;
  --bg-table-row-hover: #1c1f26;
  --bg-table-stripe: #121419;
  --bg-badge: #21242d;
  --bg-overlay: rgba(0, 0, 0, 0.85);

  /* Dark Surface & Body Aliases */
  --bg-body: var(--bg-app);
  --bg-surface: var(--bg-card);
  --font-family-base: var(--font-family);

  /* Dark Theme Text: Pure Whites & Bright Silver */
  --text-main: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;
  --text-inverse: #090a0d;

  /* Dark Theme Borders */
  --border-light: #1c1f26;
  --border-main: #262a33;
  --border-dark: #373c49;
  --border-focus: #3b82f6;

  /* Dark Theme Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.6), 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.7), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.8), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 10px 10px -5px rgba(0, 0, 0, 0.6);

  /* Status Colors in Dark Mode (High-Contrast & Vibrant) */
  --success-light: rgba(34, 197, 94, 0.18);
  --success-border: rgba(34, 197, 94, 0.4);
  --success-text: #4ade80;

  --warning-light: rgba(245, 158, 11, 0.18);
  --warning-border: rgba(245, 158, 11, 0.4);
  --warning-text: #fbbf24;

  --danger-light: rgba(239, 68, 68, 0.18);
  --danger-border: rgba(239, 68, 68, 0.4);
  --danger-text: #f87171;

  --info-light: rgba(14, 165, 233, 0.18);
  --info-border: rgba(14, 165, 233, 0.4);
  --info-text: #38bdf8;
}