/* ============================================================
   variables.css — Design System Tokens
   HospitalityOS HRMS Admin Template — V4 Editorial (FROZEN)
   Load this file FIRST before all other CSS files.

   USED ON ALL PAGES:
   - index.html (Dashboard)
   - login.html, signup.html, forgot-password.html, reset-password.html (Auth)
   - staff-directory.html, staff-profile.html, staff-add.html (Staff Management)
   - scheduling.html (Scheduling Calendar)
   - time-off.html (Time Off Requests)
   - payroll.html, payroll-setup.html, payroll-generate.html,
     payroll-summary.html, payroll-detail.html, payroll-history.html,
     payroll-forecast.html, payslip.html (Payroll)
   - messaging.html (Messaging)
   - sales.html, sales-analytics.html (Sales)
   - cost-management.html, cost-management-log.html (Cost Management)
   - inventory.html (Stock & Inventory)
   - training.html (Training & Knowledge Hub)
   - business-intelligence.html (Business Analytics)
   - settings.html, settings-roles.html, settings-departments.html,
     settings-notifications.html, settings-security.html,
     settings-audit.html, settings-business-profile.html (Settings)
   ============================================================ */

:root {

   /* ----------------------------------------------------------
     BRAND & PRIMARY COLORS  (Frozen: V4 Editorial)
  ---------------------------------------------------------- */
   --color-primary: #3D5FA0;
   --color-primary-dark: #1D4ED8;
   --color-primary-tint: #EFF6FF;
   --color-primary-light: rgba(59, 130, 246, 0.12);

   /* Primary gradient (matches Submit Entry / action buttons) */
   --btn-gradient: linear-gradient(in oklab 135deg,
         oklab(49.6% -0.012 -0.118) 0%,
         oklab(56.3% -0.016 -0.134) 100%);
   --btn-gradient-shadow: 0 3px 12px rgba(59, 130, 246, 0.35);

  --btn-gradient-danger: linear-gradient(in oklab 135deg,
        #EF4444 0%,
         #DC2626 100%);
   --btn-gradient-shadow-danger: 0 3px 12px rgba(239, 68, 68, 0.35);

   --btn-gradient-grey: linear-gradient(in oklab 135deg,
        #374151 0%,
         #1F2937 100%);
   --btn-gradient-shadow-grey: 0 3px 12px rgba(0, 0, 0, 0.1);

   --btn-gradient-success: linear-gradient(in oklab 135deg,
        #22C55E 0%,
         #16A34A 100%);
   --btn-gradient-shadow-success: 0 3px 12px rgba(34, 197, 94, 0.35);

   /* ----------------------------------------------------------
     NEUTRAL PALETTE  (Frozen: V4 Editorial)
  ---------------------------------------------------------- */
   --color-bg: #F7F8FA;
   --color-surface: #F9FAFB;
   --color-white: #FFFFFF;
   --color-card: #FFFFFF;

   --color-charcoal: #1A1D23;
   --color-dark: #111827;
   --color-sidebar-bg: #FFFFFF;
   /* Frozen: sidebar is WHITE */
   --color-sidebar-border: 1px solid #E5E7EB;

   --color-body: #374151;
   --color-muted: #6B7280;
   --color-placeholder: #9CA3AF;
   --color-border: #E5E7EB;
   --color-divider: #E8E9EE;
   --color-surface-tint: #F0F1F5;
   --color-surface-alt: #F9FAFB;

   /* Warm-toned surface & border (used on Departments, Settings pages)
     Distinct from the cool-neutral surface-tint above – these carry
     a warm undertone that matches the editorial card style. */
   --color-surface-warm: #F5F4F0;
   --color-surface-warm-dark: #e7e7e7;
   --color-bg-warm: #FAF9F7;
   --color-border-warm: #ECEAE4;

   /* ----------------------------------------------------------
     SEMANTIC COLORS
  ---------------------------------------------------------- */
   --color-success: #22C55E;
   --color-success-bg: #F0FDF4;
   --color-success-border: #BBF7D0;

   --color-warning: #F59E0B;
   --color-warning-bg: #FFFBEB;
   --color-warning-border: #FDE68A;

   --color-danger: #EF4444;
   --color-danger-bg: #FEF2F2;
   --color-danger-border: #FECACA;

   --color-info: #3B82F6;
   --color-info-bg: #EFF6FF;
   --color-info-border: #BFDBFE;

   --color-orange: #FB923C;
   --color-yellow: #FACC15;
   --color-purple: #8B5CF6;
   

   /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */
   --font-primary: "Plus Jakarta Sans", "Inter", sans-serif;
   --font-secondary: "Inter", "Plus Jakarta Sans", sans-serif;
   --font-display: "Playfair Display", serif;

   /* Font Scale */
   --text-xs: 11px;
   --text-sm: 12px;
   --text-smx: 13px;
   --text-base: 14px;
   --text-md: 16px;
   --text-lg: 18px;
   --text-xl: 20px;
   --text-2xl: 24px;
   --text-3xl: 28px;
   --text-4xl: 32px;

   /* Font Weights */
   --fw-regular: 400;
   --fw-medium: 500;
   --fw-semibold: 600;
   --fw-bold: 700;

   /* Line Heights */
   --lh-tight: 1.2;
   --lh-snug: 1.35;
   --lh-normal: 1.5;
   --lh-relaxed: 1.65;

   /* ----------------------------------------------------------
     SPACING SYSTEM (4px base unit)
  ---------------------------------------------------------- */
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 20px;
   --space-6: 24px;
   --space-7: 28px;
   --space-8: 32px;
   --space-9: 36px;
   --space-10: 40px;
   --space-12: 48px;
   --space-14: 56px;
   --space-16: 64px;

   /* Layout specific */
   --content-padding-x: 32px;
   --content-padding-top: 28px;
   --content-padding-bottom: 32px;
   --card-gap: 16px;
   --row-gap: 24px;
   --card-pad: 24px;

   /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */
   --radius-xs: 6px;
   --radius-sm: 8px;
   --radius-md: 10px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-2xl: 20px;
   --radius-3xl: 24px;
   --radius-pill: 999px;

   /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */
   --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06);
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
   --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.08);
   --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.10);
   --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
   --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15);

   /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */
   --transition-fast: all 0.15s ease;
   --transition-base: all 0.20s ease;
   --transition-smooth: all 0.25s ease;
   --transition-slow: all 0.35s ease;

   /* ----------------------------------------------------------
     LAYOUT DIMENSIONS
  ---------------------------------------------------------- */
   --sidebar-collapsed: 64px;
   --sidebar-expanded: 220px;
   --header-height: 64px;
   --footer-height: 48px;

   /* ----------------------------------------------------------
     Z-INDEX LAYERS
  ---------------------------------------------------------- */
   --z-sidebar: 100;
   --z-header: 200;
   --z-dropdown: 300;
   --z-modal: 400;
   --z-toast: 500;
}