/**
 * Design Tokens - Single Source of Truth
 * Shared by desktop and mobile navigation
 */

:root {
    /* ============================================
       Brand Colors
       ============================================ */
    --brand-primary: #1e3a8a;
    --brand-secondary: #dc2626;
    --brand-accent: #3b82f6;
    
    /* ============================================
       Background Colors
       ============================================ */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-muted: #f3f4f6;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* ============================================
       Text Colors
       ============================================ */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;
    
    /* ============================================
       Border & Divider
       ============================================ */
    --border-color: #e5e7eb;
    --border-color-light: #f3f4f6;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;
    
    /* ============================================
       Spacing Scale
       ============================================ */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    
    /* ============================================
       Typography - Font Families
       ============================================ */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* ============================================
       Typography - Font Sizes
       ============================================ */
    --fs-xs: 0.75rem;     /* 12px */
    --fs-sm: 0.875rem;    /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-lg: 1.125rem;    /* 18px */
    --fs-xl: 1.25rem;     /* 20px */
    --fs-2xl: 1.5rem;     /* 24px */
    --fs-3xl: 2rem;       /* 32px */
    
    /* ============================================
       Typography - Font Weights
       ============================================ */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    
    /* ============================================
       Typography - Line Heights
       ============================================ */
    --lh-tight: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.75;
    
    /* ============================================
       Shadows
       ============================================ */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* ============================================
       Transitions
       ============================================ */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    
    /* ============================================
       Z-Index Scale
       ============================================ */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 1000;
    --z-drawer: 1001;
    --z-modal: 2000;
    
    /* ============================================
       Navigation Specific Tokens
       ============================================ */
    --nav-bg: var(--bg-primary);
    --nav-text: var(--text-primary);
    --nav-text-hover: var(--brand-primary);
    --nav-text-active: var(--brand-primary);
    --nav-border: var(--border-color);
    --nav-spacing: var(--space-4);
    --nav-font-size: var(--fs-base);
    --nav-font-weight: var(--fw-medium);
    --nav-touch-target: 44px; /* Minimum touch target */
}