/* ============================================================================
   STAFFINC CENTRALIZED THEME SYSTEM
   ============================================================================
   This file contains all centralized design tokens (colors, typography, spacing)
   for the Staffinc website. All pages should import this file and reference
   tokens using CSS custom properties (var(--token-name)) instead of hardcoded
   values.
   
   Structure:
   - Colors: Primary, Secondary, and Utility colors
   - Typography: Font families, sizes, and weights
   - Spacing: Margin, padding, and gap values
   
   Browser Support:
   - Modern browsers (Chrome 49+, Firefox 31+, Safari 9.1+, Edge 15+): Full support
   - Older browsers (IE 11): Fallback values provided
   ============================================================================ */

:root {
  /* ──────────────────────────────────────────────────────────────────────
     COLORS: PRIMARY BRAND COLORS
     ────────────────────────────────────────────────────────────────────── */
  
  /* Navy: Primary brand color used for navigation, headers, and primary backgrounds */
  --staffinc-navy: #0B1F3A;
  
  /* Navy variant: Slightly lighter navy for secondary uses */
  --staffinc-navy2: #0D2444;
  
  /* Navy Dark: Dark navy for button backgrounds and deep accents */
  --staffinc-navy-dk: #02404F;
  
  /* ──────────────────────────────────────────────────────────────────────
     COLORS: SECONDARY BRAND COLORS
     ────────────────────────────────────────────────────────────────────── */
  
  /* Teal: Secondary brand color for accents, highlights, and interactive elements */
  --staffinc-teal: #00D9FF;
  
  /* Teal Light: Light teal variant for hover states and secondary accents */
  --staffinc-teal-lt: #00D9FF;
  
  /* Teal Extra Light: Extra light teal for backgrounds and subtle highlights */
  --staffinc-teal-xlt: #00D9FF;
  
  /* ──────────────────────────────────────────────────────────────────────
     COLORS: ACCENT COLORS
     ────────────────────────────────────────────────────────────────────── */
  
  /* Gold: Accent color for highlights and special elements */
  --staffinc-gold: #F5C842;
  
  /* Amber: Warm accent color for secondary highlights and alerts */
  --staffinc-amber: #F4A261;
  
  /* Purple: Accent color for tertiary highlights and special elements */
  --staffinc-purple: #7850DC;
  
  /* Purple Light: Light purple variant for hover states and secondary accents */
  --staffinc-purple-lt: #A78BFA;
  
  /* ──────────────────────────────────────────────────────────────────────
     COLORS: UTILITY COLORS
     ────────────────────────────────────────────────────────────────────── */
  
  /* Mint: Light mint background color for success states and positive messaging */
  --staffinc-mint: #E6F7F5;
  
  /* Mint Dark: Darker mint variant for text and borders on mint backgrounds */
  --staffinc-mint-dk: #C4ECE7;
  
  /* Slate: Neutral color for secondary text and UI elements */
  --staffinc-slate: #4A5568;
  
  /* Muted: Muted color for tertiary text and disabled states */
  --staffinc-muted: #8896A8;
  
  /* Border: Color for borders and dividers */
  --staffinc-border: #E2E8F0;
  
  /* White: Light background and text color */
  --staffinc-white: #FFFFFF;
  
  /* Black: Dark text color for contrast on light backgrounds */
  --staffinc-black: #000000;
  
  /* Off-white: Subtle off-white background color for sections */
  --staffinc-off: #F5F7FA;
  
  /* Amber Light: Light amber background for subtle highlights */
  --staffinc-amber-lt: #FEF3E9;
  
  /* ──────────────────────────────────────────────────────────────────────
     TYPOGRAPHY: FONT FAMILIES
     ────────────────────────────────────────────────────────────────────── */
  
  /* Display font: Used for headlines and large text */
  --staffinc-font-display: 'Bricolage Grotesque', sans-serif;
  
  /* Body font: Used for body text and general content */
  --staffinc-font-body: 'DM Sans', sans-serif;
  
  /* ──────────────────────────────────────────────────────────────────────
     TYPOGRAPHY: FONT SIZES (rem units for accessibility)
     ────────────────────────────────────────────────────────────────────── */
  
  /* Extra small: 12px - Used for labels, badges, and small text */
  --staffinc-font-size-xs: 0.75rem;
  
  /* Small: 14px - Used for secondary text and captions */
  --staffinc-font-size-sm: 0.875rem;
  
  /* Base: 16px - Default body text size */
  --staffinc-font-size-base: 1rem;
  
  /* Large: 18px - Used for larger body text and subheadings */
  --staffinc-font-size-lg: 1.125rem;
  
  /* Extra large: 20px - Used for section subheadings */
  --staffinc-font-size-xl: 1.25rem;
  
  /* 2XL: 24px - Used for section headings */
  --staffinc-font-size-2xl: 1.5rem;
  
  /* 3XL: 30px - Used for page subheadings */
  --staffinc-font-size-3xl: 1.875rem;
  
  /* 4XL: 36px - Used for main page headings */
  --staffinc-font-size-4xl: 2.25rem;
  
  /* ──────────────────────────────────────────────────────────────────────
     TYPOGRAPHY: FONT WEIGHTS
     ────────────────────────────────────────────────────────────────────── */
  
  /* Light: 300 - Used for subtle, de-emphasized text */
  --staffinc-font-weight-light: 300;
  
  /* Normal: 400 - Default body text weight */
  --staffinc-font-weight-normal: 400;
  
  /* Medium: 500 - Used for slightly emphasized text */
  --staffinc-font-weight-medium: 500;
  
  /* Semibold: 600 - Used for labels and secondary headings */
  --staffinc-font-weight-semibold: 600;
  
  /* Bold: 700 - Used for headings and emphasized text */
  --staffinc-font-weight-bold: 700;
  
  /* Extra bold: 800 - Used for main headings and strong emphasis */
  --staffinc-font-weight-extrabold: 800;
  
  /* ──────────────────────────────────────────────────────────────────────
     SPACING: STANDARD SPACING SCALE (4px base unit)
     ────────────────────────────────────────────────────────────────────── */
  
  /* Extra small: 4px - Used for tight spacing between elements */
  --staffinc-spacing-xs: 4px;
  
  /* Small: 8px - Used for small gaps and padding */
  --staffinc-spacing-sm: 8px;
  
  /* Medium: 12px - Used for standard gaps and padding */
  --staffinc-spacing-md: 12px;
  
  /* Large: 16px - Used for larger gaps and padding */
  --staffinc-spacing-lg: 16px;
  
  /* Extra large: 24px - Used for section spacing */
  --staffinc-spacing-xl: 24px;
  
  /* 2XL: 32px - Used for larger section spacing */
  --staffinc-spacing-2xl: 32px;
  
  /* 3XL: 48px - Used for major section spacing */
  --staffinc-spacing-3xl: 48px;
  
  /* 4XL: 64px - Used for large layout spacing */
  --staffinc-spacing-4xl: 64px;
}

/* ============================================================================
   FUTURE: THEME VARIATIONS
   ============================================================================
   The following structure supports multiple theme variations (e.g., dark mode).
   To use a theme variation, add the data-theme attribute to the root element:
   
   Example: <html data-theme="dark">
   
   All token names remain identical across variations, with only values changing.
   This allows theme switching without requiring code modifications.
   ============================================================================ */

/* Dark theme variation (example for future implementation) */
/* [data-theme="dark"] {
  --staffinc-navy: #1a2f4a;
  --staffinc-white: #0f1419;
  --staffinc-off: #1a1f2e;
  --staffinc-border: #2d3748;
  --staffinc-slate: #cbd5e0;
  --staffinc-muted: #a0aec0;
} */