/**
 * Centralized Theme Variables
 * This file contains all light mode and dark mode color variables used across the site.
 * Update colors here to apply changes site-wide.
 */

/* Light Mode Variables (:root) */
:root {
    /* Primary Colors */
    --cfa-red: #E31837;
    --navy: #1B365D;
    
    /* Background Colors */
    --light-gray: #F8F9FA;
    --medium-gray: #6C757D;
    --dark-gray: #343A40;
    --white: #FFFFFF;
    
    /* Border and Shadow */
    --border-color: #E0E0E0;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
    
    /* Status Colors */
    --success: #28A745;
    --success-green: #28A745;
    --warning: #FFC107;
    --warning-orange: #FFC107;
    --danger: #DC3545;
    --danger-red: #DC3545;
    --info: #17A2B8;
    --info-blue: #17A2B8;
    
    /* Special Colors */
    --teal: #20B2AA;
    
    /* Component-Specific Variables */
    --toast-bg: #ffffff;
    --toast-border: #e0e0e0;
    --toast-text: #333333;
    --toast-shadow: rgba(0, 0, 0, 0.15);
    
    --progress-toast-bg: #ffffff;
    --progress-toast-border: #e0e0e0;
    --progress-toast-text: #333333;
    --progress-toast-shadow: rgba(0, 0, 0, 0.15);
    
    --tabs-bg: #ffffff;
    --tabs-border: #e0e0e0;
    --tabs-text-muted: #6c757d;
    --tabs-text-dark: #343a40;
    --tabs-light-gray: #f8f9fa;
    
    --scroll-btn-red: #E51636;
    --scroll-btn-red-hover: #c4122f;
    --scroll-btn-red-active: #a00f26;
    --scroll-btn-shadow: rgba(0, 0, 0, 0.15);
    --scroll-btn-shadow-hover: rgba(0, 0, 0, 0.2);
    
    /* Focus Indicator Colors - High visibility for accessibility */
    --focus-color: #0066cc;
    --focus-outline-width: 3px;
    --focus-outline-offset: 3px;
    --focus-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}

/* Dark Mode Variables */
[data-theme="dark"] {
    /* Primary Colors */
    --cfa-red: #ff4757;
    /* Note: --navy is set to #404040 here, but navbar-component.css overrides it to keep #1B365D */
    --navy: #404040;
    
    /* Background Colors */
    --light-gray: #404040;
    --medium-gray: #575757;
    --dark-gray: #ffffff;
    --white: #6b6b6b;
    
    /* Border and Shadow */
    --border-color: #7d7d7d;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.4);
    
    /* Status Colors */
    --success: #1c8247;
    --success-green: #1c8247;
    --warning: #b37400;
    --warning-orange: #b37400;
    --danger: #c22e2e;
    --danger-red: #c22e2e;
    --info: #3742fa;
    --info-blue: #3742fa;
    
    /* Special Colors */
    --teal: #26d0ce;
    
    /* Component-Specific Variables */
    --toast-bg: #6b6b6b;
    --toast-border: #7d7d7d;
    --toast-text: #ffffff;
    --toast-shadow: rgba(0, 0, 0, 0.4);
    
    --progress-toast-bg: #6b6b6b;
    --progress-toast-border: #7d7d7d;
    --progress-toast-text: #ffffff;
    --progress-toast-shadow: rgba(0, 0, 0, 0.4);
    
    --tabs-bg: #6b6b6b;
    --tabs-border: #7d7d7d;
    --tabs-text-muted: #575757;
    --tabs-text-dark: #ffffff;
    --tabs-light-gray: #404040;
    
    --scroll-btn-red: #ff4757;
    --scroll-btn-red-hover: #ff3545;
    --scroll-btn-red-active: #ff1a2e;
    --scroll-btn-shadow: rgba(0, 0, 0, 0.3);
    --scroll-btn-shadow-hover: rgba(0, 0, 0, 0.4);
    
    /* Focus Indicator Colors - High visibility for dark mode */
    --focus-color: #4da6ff;
    --focus-outline-width: 3px;
    --focus-outline-offset: 3px;
    --focus-shadow: 0 0 0 3px rgba(77, 166, 255, 0.4);
}

/* Note: Navbar uses --navy: #1B365D in dark mode, which is handled in navbar-component.css */

/* High Contrast Mode Variables */
/* WCAG AAA compliant with 7:1 contrast ratios for normal text */
[data-theme="high-contrast"] {
    /* Primary Colors - High contrast versions */
    --cfa-red: #CC0000;
    --navy: #000080;
    
    /* Background Colors - Pure black and white for maximum contrast */
    --light-gray: #FFFFFF;
    --medium-gray: #000000;
    --dark-gray: #000000;
    --white: #FFFFFF;
    
    /* Border and Shadow - Bold, visible borders */
    --border-color: #000000;
    --shadow: 0 0 0 2px #000000;
    --shadow-hover: 0 0 0 3px #000000;
    
    /* Status Colors - High contrast versions */
    --success: #006600;
    --success-green: #006600;
    --warning: #CC6600;
    --warning-orange: #CC6600;
    --danger: #CC0000;
    --danger-red: #CC0000;
    --info: #0000CC;
    --info-blue: #0000CC;
    
    /* Special Colors */
    --teal: #006666;
    
    /* Component-Specific Variables */
    --toast-bg: #FFFFFF;
    --toast-border: #000000;
    --toast-text: #000000;
    --toast-shadow: 0 0 0 3px #000000;
    
    --progress-toast-bg: #FFFFFF;
    --progress-toast-border: #000000;
    --progress-toast-text: #000000;
    --progress-toast-shadow: 0 0 0 3px #000000;
    
    --tabs-bg: #FFFFFF;
    --tabs-border: #000000;
    --tabs-text-muted: #000000;
    --tabs-text-dark: #000000;
    --tabs-light-gray: #FFFFFF;
    
    --scroll-btn-red: #CC0000;
    --scroll-btn-red-hover: #990000;
    --scroll-btn-red-active: #660000;
    --scroll-btn-shadow: 0 0 0 2px #000000;
    --scroll-btn-shadow-hover: 0 0 0 3px #000000;
    
    /* Focus Indicator Colors - Maximum visibility for high contrast mode */
    --focus-color: #0000FF;
    --focus-outline-width: 4px;
    --focus-outline-offset: 4px;
    --focus-shadow: 0 0 0 4px #000000;
}