/* ============================================================
   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);

  /* ----------------------------------------------------------
     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;

  /* ----------------------------------------------------------
     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-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;
}