/**
 * Design Tokens - Knowledge Equity Design System
 * 
 * Extracted from ke-front-page.php and ke-landing.css
 * Version: 1.0
 * Date: 2025-12-07
 * 
 * Usage: Include this file in all pages requiring the design system
 * Browser Support: Modern browsers (Chrome, Firefox, Safari, Edge latest)
 * No IE11 support required
 */

:root {
    /* ============================================
       COLOR PALETTE
       ============================================ */
    
    /* Primary Brand Color - Dark Teal */
    --dark-teal: #0e3c44;
    /* Usage: Primary brand color, headings, body text, footer background */
    /* Contrast: 10.46:1 on white (exceeds WCAG AAA) */
    
    /* Accent Color - Gold */
    --gold: #fcb900;
    /* Usage: Primary CTAs, enrollment buttons, accent elements */
    /* Contrast: 4.89:1 on dark teal (meets WCAG AA for large text) */
    
    /* Secondary Accent - Soft Teal */
    --soft-teal: #8acbc0;
    /* Usage: Links, section backgrounds, secondary accents */
    /* Contrast: Suitable for large text and non-critical elements */
    
    /* Neutral - Light Grey */
    --light-grey: #f4f4f4;
    /* Usage: Section backgrounds, subtle dividers */
    
    /* Base - White */
    --white: #ffffff;
    /* Usage: Card backgrounds, header, content areas */
    
    
    /* ============================================
       TYPOGRAPHY
       ============================================ */
    
    /* Font Families */
    --font-heading: 'Montserrat', sans-serif;
    /* Weight: 700 (Bold) - For all headings H1-H4 */
    /* Source: Google Fonts */
    
    --font-body: 'Lato', sans-serif;
    /* Weights: 400 (Regular), 700 (Bold) */
    /* Source: Google Fonts */
    
    
    /* Type Scale (Desktop) */
    --font-size-h1: 3.5rem;      /* 56px - Hero headings */
    --font-size-h2: 2.5rem;      /* 40px - Section headings */
    --font-size-h3: 1.8rem;      /* 28.8px - Subsection headings */
    --font-size-h4: 1.1rem;      /* 17.6px - Card titles */
    --font-size-body: 1rem;      /* 16px - Base body text */
    --font-size-large: 1.25rem;  /* 20px - Hero descriptions, emphasis */
    
    /* Type Scale (Mobile <768px) - Responsive Adjustments */
    --font-size-h1-mobile: 2.5rem;  /* 40px */
    --font-size-h2-mobile: 2rem;    /* 32px */
    
    /* Line Heights */
    --line-height-body: 1.6;  /* Optimized for readability */
    --line-height-heading: 1.2;
    
    
    /* ============================================
       SPACING SYSTEM
       ============================================ */
    
    /* Base Unit */
    --spacing-base: 1rem;  /* 16px */
    
    /* Component Spacing */
    --spacing-button-padding: 0.75rem;     /* Button padding (12px) */
    --spacing-card-padding: 1.5rem;        /* Card internal padding (24px) */
    --spacing-container-horizontal: 2rem;  /* Container side padding (32px) */
    
    /* Vertical Rhythm */
    --spacing-section-padding: 6rem;  /* Section vertical padding (96px) */
    --spacing-hero-padding: 8rem;     /* Hero section padding (128px) */
    
    /* Grid Gaps */
    --spacing-grid-gap: 1.5rem;       /* Standard grid gap (24px) */
    --spacing-grid-gap-large: 2rem;   /* Large grid gap (32px) */
    
    /* Margins */
    --spacing-heading-bottom: 2rem;   /* Space below headings (32px) */
    --spacing-paragraph-bottom: 1rem; /* Space below paragraphs (16px) */
    
    
    /* ============================================
       LAYOUT & CONTAINERS
       ============================================ */
    
    --container-max-width: 1100px;  /* Maximum content width */
    
    
    /* ============================================
       RESPONSIVE BREAKPOINTS
       ============================================ */
    
    /* Mobile First Approach */
    --breakpoint-mobile: 768px;    /* < 768px = Mobile */
    --breakpoint-tablet: 1024px;   /* 768px - 1024px = Tablet */
    --breakpoint-desktop: 1025px;  /* >= 1025px = Desktop */
    
    
    /* ============================================
       COMPONENT STYLES
       ============================================ */
    
    /* Buttons */
    --button-border-radius: 5px;
    --button-padding: 0.75rem 1.5rem;
    --button-padding-large: 1rem 2rem;
    --button-font-size: 1rem;
    --button-font-size-large: 1.1rem;
    --button-transform-hover: translateY(-3px);
    --button-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.15);
    
    /* Cards */
    --card-border-radius: 8px;
    --card-padding: 1.5rem;
    --card-border: 1px solid #e0e0e0;
    --card-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    --card-shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.1);
    --card-transform-hover: translateY(-5px);
    
    /* Navigation */
    --nav-item-spacing: 2rem;
    --nav-border: 1px solid #ddd;
    
    
    /* ============================================
       TRANSITIONS & ANIMATIONS
       ============================================ */
    
    --transition-standard: 0.3s ease;
    --transition-color: color 0.3s ease;
    --transition-transform: transform 0.3s ease;
    --transition-shadow: box-shadow 0.3s ease;
    
    
    /* ============================================
       ACCESSIBILITY
       ============================================ */
    
    /* Touch Targets (Mobile) */
    --touch-target-min: 44px;  /* iOS/Android minimum touch target size */
    
    
    /* ============================================
       Z-INDEX SCALE
       ============================================ */
    
    --z-index-header: 1000;
    --z-index-overlay: 2000;
    --z-index-modal: 3000;
}


/* ============================================
   UTILITY CLASSES (Optional)
   ============================================ */

.text-dark-teal { color: var(--dark-teal); }
.text-gold { color: var(--gold); }
.text-soft-teal { color: var(--soft-teal); }
.text-white { color: var(--white); }

.bg-dark-teal { background-color: var(--dark-teal); }
.bg-gold { background-color: var(--gold); }
.bg-soft-teal { background-color: var(--soft-teal); }
.bg-light-grey { background-color: var(--light-grey); }
.bg-white { background-color: var(--white); }


/* ============================================
   ACCESSIBILITY NOTES
   ============================================ */

/*
 * WCAG 2.1 Level AA Contrast Ratios:
 * 
 * - Dark Teal (#0e3c44) on White (#ffffff): 10.46:1 ✓ (Exceeds AAA - 7:1)
 * - Gold (#fcb900) on Dark Teal (#0e3c44): 4.89:1 ✓ (Meets AA Large Text - 3:1)
 * - Soft Teal (#8acbc0) on White: Use for large text only or non-critical content
 * 
 * Touch Targets:
 * - All interactive elements should be minimum 44x44px (--touch-target-min)
 * - Button padding ensures adequate touch area on mobile
 */


/* ============================================
   USAGE EXAMPLES
   ============================================ */

/*
 * Heading Styles:
 * h1 { font-family: var(--font-heading); font-size: var(--font-size-h1); color: var(--dark-teal); }
 * 
 * Body Text:
 * p { font-family: var(--font-body); font-size: var(--font-size-body); line-height: var(--line-height-body); }
 * 
 * Primary Button:
 * .btn-primary { 
 *   background-color: var(--gold); 
 *   color: var(--dark-teal); 
 *   padding: var(--button-padding);
 *   border-radius: var(--button-border-radius);
 * }
 * 
 * Card Component:
 * .card {
 *   padding: var(--card-padding);
 *   border-radius: var(--card-border-radius);
 *   box-shadow: var(--card-shadow);
 * }
 * 
 * Container:
 * .container {
 *   max-width: var(--container-max-width);
 *   padding: 0 var(--spacing-container-horizontal);
 * }
 */