/**
 * PMERIT Design System - Theme Variables
 * Version: 2.0
 * Last Updated: October 2025
 * 
 * Single source of truth for all design tokens
 * Extracted from: .copilot/Pmerit-theme_typography.html (Official Spec)
 * 
 * Usage: Load this file FIRST before any other CSS
 */

/* ========================================
   LIGHT MODE (DEFAULT)
   ======================================== */

:root {
    /* === PRIMARY BRAND COLORS === */
    --color-primary: #375b8d;          /* Dark Blue - Main brand color (extracted from production) */
    --color-secondary: #4AA4B9;        /* Teal - Secondary brand color */
    --color-accent: #FF6B6B;           /* Coral - Call-to-action color */
    
    /* === EXTENDED BRAND PALETTE === */
    --color-light-teal: #7ED0D9;       /* Light Teal - Highlights */
    --color-coral-dark: #E05A5A;       /* Dark Coral - Hover states */
    
    /* === SEMANTIC COLORS === */
    --color-success: #3A7F5C;          /* Green - Success states */
    --color-warning: #E67E22;          /* Orange - Warning states */
    --color-error: #DC3545;            /* Red - Error states */
    --color-info: #4AA4B9;             /* Teal - Info states */
    
    /* === NEUTRAL GRAYS === */
    --color-light-gray: #F8F9FA;       /* Lightest gray - Backgrounds */
    --color-medium-gray: #6C757D;      /* Medium gray - Secondary text */
    --color-dark-gray: #2C2C2C;        /* Dark gray - Primary text */
    --color-charcoal: #3A3A3A;         /* Charcoal - Strong text */
    
    /* === BACKGROUND & SURFACES === */
    --bg-primary: #F8F9FA;             /* Main background */
    --bg-secondary: #FFFFFF;           /* Card backgrounds */
    --bg-card: #FFFFFF;                /* Card surfaces */
    --bg-elevated: #FFFFFF;            /* Elevated elements (modals, dropdowns) */
    --bg-overlay: rgba(0, 0, 0, 0.5);  /* Modal overlay */
    /* Special Elements */
    --bg-gradient-start: #375b8d;      /* Brand blue gradient start (extracted from production) */
    --bg-gradient-end: #4AA4B9;        /* Brand teal gradient end */

    /* Hero gradient - uses brand colors */
    --gradient-hero: linear-gradient(135deg, #375b8d 0%, #4AA4B9 100%);
    
    /* === BORDERS === */
    --border-color: #E9ECEF;           /* Default border */
    --border-color-light: #F1F3F5;     /* Light border */
    --border-color-medium: #DEE2E6;    /* Medium border */
    --border-radius-sm: 4px;           /* Small radius */
    --border-radius-md: 8px;           /* Medium radius */
    --border-radius-lg: 12px;          /* Large radius */
    --border-radius-xl: 16px;          /* Extra large radius */
    --border-radius-full: 9999px;      /* Full round (pills) */
    
    /* === TEXT COLORS === */
    --text-primary: #2C2C2C;           /* Primary text */
    --text-secondary: #6C757D;         /* Secondary text */
    --text-muted: #8E9499;             /* Muted text */
    --text-inverse: #FFFFFF;           /* White text (on dark backgrounds) */
    --text-link: #FF6B6B;              /* Link color (coral) */
    --text-link-hover: #E05A5A;        /* Link hover */
    
    /* === INTERACTIVE COLORS === */
    --interactive-primary: #375b8d;           /* Primary buttons */
    --interactive-primary-hover: #2a4a73;     /* Primary button hover */
    --interactive-secondary: #4AA4B9;         /* Secondary buttons */
    --interactive-secondary-hover: #3a8a99;   /* Secondary button hover */
    --interactive-accent: #FF6B6B;            /* Accent buttons */
    --interactive-accent-hover: #E05A5A;      /* Accent button hover */
    
    /* === SHADOWS === */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
    
    /* === TYPOGRAPHY === */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* === FONT SIZES (Phase 8.6 - Responsive Typography) === */
    --text-xs: 12px;      /* Extra small text */
    --text-sm: 14px;      /* Small text (secondary) */
    --text-base: 16px;    /* Base body text */
    --text-md: 16px;      /* Medium - explicit for mobile */
    --text-lg: 18px;      /* Large text */
    --text-xl: 20px;      /* H3 */
    --text-2xl: 24px;     /* H2 */
    --text-3xl: 32px;     /* H1 */
    --text-4xl: 40px;     /* Hero headings */
    
    /* Mobile-specific text sizes */
    --text-mobile-body: 16px;     /* Mobile body - prevent zoom on iOS */
    --text-mobile-heading: 24px;  /* Mobile heading */
    --text-mobile-hero: 28px;     /* Mobile hero */
    
    /* === FONT WEIGHTS === */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    
    /* === LINE HEIGHTS === */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    /* === SPACING (4px base unit - Phase 8.6) === */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    
    /* Responsive spacing modifiers */
    --space-mobile-gutter: var(--space-4);
    --space-mobile-section: var(--space-8);
    --space-desktop-gutter: var(--space-6);
    --space-desktop-section: var(--space-12);
    
    /* === Z-INDEX LAYERS === */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* === TRANSITIONS === */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    
    /* === MOBILE SPECIFICATIONS === */
    --mobile-touch-target: 44px;       /* Minimum touch target (iOS guidelines) */
    --mobile-input-height: 52px;       /* Mobile input height */
    --mobile-header-height: 64px;      /* Mobile header height */
    --mobile-footer-height: 60px;      /* Mobile footer height */
    
    /* === SAFE AREA (iOS Notch Support) === */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    
    /* === RESPONSIVE BREAKPOINTS (Phase 8.1) === */
    --bp-xs: 360px;    /* Extra small - minimum mobile */
    --bp-sm: 480px;    /* Small - mobile landscape */
    --bp-md: 768px;    /* Medium - tablet portrait */
    --bp-lg: 1024px;   /* Large - tablet landscape / small desktop */
    --bp-xl: 1280px;   /* Extra large - desktop */
}


/* ========================================
   DARK MODE
   ======================================== */

[data-theme="dark"] {
    /* === ADJUSTED BRAND COLORS FOR DARK === */
    --color-primary: #598bca;          /* Lighter blue for dark backgrounds (extracted from production) */
    --color-secondary: #5FC8E5;        /* Lighter teal for dark backgrounds */
    --color-accent: #FF7B7B;           /* Lighter coral for dark backgrounds */
    
    /* === EXTENDED PALETTE === */
    --color-light-teal: #7ED0D9;
    --color-coral-dark: #FF6B6B;
    
    /* === SEMANTIC COLORS === */
    --color-success: #4CAF7A;          /* Lighter green */
    --color-warning: #FF9800;          /* Lighter orange */
    --color-error: #FF5252;            /* Lighter red */
    --color-info: #5FC8E5;
    
    /* === BACKGROUNDS & SURFACES === */
    --bg-primary: #1e1e1e;             /* Dark background (extracted from production) */
    --bg-secondary: #1E1E1E;           /* Card backgrounds */
    --bg-card: #1E1E1E;
    --bg-elevated: #252525;            /* Elevated elements */
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-gradient-start: #1E3A5F;      /* Dark mode brand blue gradient start */
    --bg-gradient-end: #2A4A6A;        /* Dark mode brand teal gradient end */

    /* Hero gradient - matches bg-gradient-start/end for consistency */
    --gradient-hero: linear-gradient(135deg, #1E3A5F 0%, #2A4A6A 100%);
    
    /* === BORDERS === */
    --border-color: #333333;
    --border-color-light: #2A2A2A;
    --border-color-medium: #404040;
    
    /* === TEXT COLORS === */
    --text-primary: #E9E9E9;           /* Light text */
    --text-secondary: #B0B0B0;         /* Secondary light text */
    --text-muted: #8A8A8A;             /* Muted light text */
    --text-inverse: #121212;           /* Dark text (on light backgrounds) */
    --text-link: #FF7B7B;
    --text-link-hover: #FF6B6B;
    
    /* === INTERACTIVE COLORS === */
    --interactive-primary: #598bca;
    --interactive-primary-hover: #6a9bd8;
    --interactive-secondary: #5FC8E5;
    --interactive-secondary-hover: #6FD8F5;
    --interactive-accent: #FF7B7B;
    --interactive-accent-hover: #FF8B8B;
    
    /* === SHADOWS (adjusted for dark mode) === */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.7);
}


/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Color utilities - use sparingly, prefer semantic variables */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }

/* Screen reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   PHASE 8.8 - ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Skip link - appears on focus */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    font-weight: var(--weight-semibold);
    z-index: 9999;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Enhanced focus visible for keyboard navigation */
body.using-keyboard *:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* Ensure focus indicators are visible on all interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* High contrast focus for better visibility */
@media (prefers-contrast: high) {
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
        outline-width: 3px;
        outline-offset: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Ensure adequate touch targets on mobile */
@media (max-width: 767px) {
    button,
    a,
    input[type="checkbox"],
    input[type="radio"],
    [role="button"],
    .interactive {
        min-height: var(--mobile-touch-target);
        min-width: var(--mobile-touch-target);
    }
}

/* Live region styling (hidden but accessible) */
[role="status"],
[role="alert"],
[aria-live] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}