/* ============================================================================
   WORKFORCE DEMOCRACY PROJECT - CSS VARIABLES (Design Tokens)
   Version: 37.10.2-MODULAR
   Date: November 14, 2024
   
   Purpose: Centralized design system tokens
   Mobile-First, Accessible, Privacy-Focused
   
   This file must load FIRST before all other CSS files.
   All other stylesheets reference these variables.
   ============================================================================ */

:root {
  /* ==========================================================================
     PRIMARY PALETTE - Purple-Blue Gradient (from Hero)
     ========================================================================== */
  --primary: #667eea;              /* Primary purple-blue */
  --primary-dark: #764ba2;         /* Deeper purple */
  --primary-light: #8b9dff;        /* Lighter blue-purple */
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  /* ==========================================================================
     BACKGROUND PALETTE - Light Blue-Grey (from Hero)
     ========================================================================== */
  --bg-lightest: #f5f7fa;          /* Lightest background */
  --bg-light: #e8ecf3;             /* Light background */
  --bg-medium: #c3cfe2;            /* Medium background */
  
  /* ==========================================================================
     SECTION DIFFERENTIATION - Gradients for each section
     ========================================================================== */
  --section-hero: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --section-civic: linear-gradient(135deg, #f0f3f8 0%, #d4dce9 100%);
  --section-jobs: linear-gradient(135deg, #e8ecf3 0%, #bdc9de 100%);
  --section-business: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  
  /* ==========================================================================
     TEXT COLORS - WCAG AA compliant
     ========================================================================== */
  --text: #2d3748;                 /* Primary text (gray-800) */
  --text-secondary: #4a5568;       /* Secondary text (gray-700) */
  --text-light: #718096;           /* Tertiary text (gray-500) */
  --text-inverse: #ffffff;         /* White text on dark backgrounds */
  
  /* ==========================================================================
     SURFACE COLORS - Backgrounds and cards
     ========================================================================== */
  --surface: #ffffff;              /* White surface */
  --surface-alt: #f7fafc;          /* Alternate surface (gray-50) */
  --background: #f5f7fa;           /* Page background */
  --background-alt: #e8ecf3;       /* Alternate page background */
  
  /* ==========================================================================
     BORDERS
     ========================================================================== */
  --border: #e2e8f0;               /* Standard border (gray-200) */
  --border-light: #edf2f7;         /* Light border (gray-100) */
  
  /* ==========================================================================
     SEMANTIC COLORS - Success, Warning, Error, Info
     ========================================================================== */
  --success: #48bb78;              /* Green - success states */
  --warning: #ed8936;              /* Orange - warning states */
  --error: #f56565;                /* Red - error states */
  --info: #4299e1;                 /* Blue - info states */
  
  /* ==========================================================================
     SPACING SYSTEM - Consistent spacing scale
     Based on 4px base unit (0.25rem)
     ========================================================================== */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  
  /* ==========================================================================
     TYPOGRAPHY SCALE - Font families, sizes, weights, line heights
     ========================================================================== */
  
  /* Font Family */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  
  /* Font Sizes - Modular scale based on 16px base */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 2rem;      /* 32px */
  --font-size-4xl: 2.5rem;    /* 40px */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Line Heights */
  --line-height-tight: 1.2;      /* Headings */
  --line-height-normal: 1.5;     /* Body text */
  --line-height-relaxed: 1.75;   /* Comfortable reading */
  
  /* ==========================================================================
     BORDER RADIUS - Rounded corners
     ========================================================================== */
  --radius-sm: 0.25rem;   /* 4px - subtle rounding */
  --radius-md: 0.5rem;    /* 8px - standard rounding */
  --radius-lg: 1rem;      /* 16px - pronounced rounding */
  --radius-full: 9999px;  /* Fully rounded (pills, circles) */
  
  /* ==========================================================================
     SHADOWS - Purple-blue tinted for brand consistency
     ========================================================================== */
  --shadow-sm: 0 1px 3px rgba(102, 126, 234, 0.12);      /* Subtle elevation */
  --shadow-md: 0 4px 6px rgba(102, 126, 234, 0.15);      /* Standard elevation */
  --shadow-lg: 0 10px 15px rgba(102, 126, 234, 0.2);     /* High elevation */
  --shadow-xl: 0 20px 25px rgba(102, 126, 234, 0.25);    /* Maximum elevation */
  
  /* ==========================================================================
     TRANSITIONS - Consistent animation timing
     ========================================================================== */
  --transition-fast: 150ms ease;    /* Quick interactions (hover) */
  --transition-base: 300ms ease;    /* Standard transitions */
  --transition-slow: 500ms ease;    /* Deliberate animations */
  
  /* ==========================================================================
     Z-INDEX SCALE - Stacking order management
     Higher numbers = closer to user
     ========================================================================== */
  --z-dropdown: 1000;        /* Dropdown menus */
  --z-sticky: 1020;          /* Sticky header */
  --z-fixed: 1030;           /* Fixed positioned elements */
  --z-modal-backdrop: 1040;  /* Modal backdrop */
  --z-modal: 1050;           /* Modal content */
  --z-popover: 1060;         /* Popovers and tooltips */
  --z-tooltip: 1070;         /* Tooltips (highest) */
}

/* ============================================================================
   USAGE NOTES FOR DEVELOPERS
   ============================================================================
   
   HOW TO USE THESE VARIABLES:
   
   In other CSS files, reference variables like this:
   
   .my-element {
     color: var(--text);
     background: var(--surface);
     padding: var(--space-md);
     font-size: var(--font-size-base);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-sm);
   }
   
   BENEFITS:
   - Consistent design across entire project
   - Easy theme changes (update variables once)
   - Better maintainability
   - Clear naming convention
   
   MODIFICATION GUIDELINES:
   - Only modify if you understand the impact
   - Test thoroughly across all pages
   - Document changes in version history
   - Consider accessibility (WCAG contrast ratios)
   
   COLOR CONTRAST REFERENCE (WCAG AA):
   - --text on --surface: 12.63:1 ✅ (AAA)
   - --text-secondary on --surface: 9.73:1 ✅ (AAA)
   - --text-light on --surface: 4.54:1 ✅ (AA)
   - --primary on white: 4.54:1 ✅ (AA)
   
   ============================================================================ */