/* ===== Component-Based Color Configuration ===== */
:root {
    /* ===== GLOBAL THEME COLORS ===== */
    --theme-primary: #3A5A78; /* Deep royal blue - represents truth, heaven */
    --theme-primary-rgb: 58, 90, 120; /* RGB values for theme-primary for opacity control */
    --theme-primary-dark: #2C4B6A; /* Darker variant of primary color */
    --theme-secondary: #C9A96F; /* Soft gold - represents divinity, importance */
    --theme-background: #F7F4EB; /* Light parchment - represents scrolls, aged paper */
    --theme-text: #2A3342; /* Dark slate - main text color for readability */
    --theme-text-light: #4A5568; /* Medium slate - secondary text */
    --theme-error: #A73737; /* Burgundy - for errors, more refined than bright red */
    --theme-error-rgb: 167, 55, 55; /* RGB values for theme-error for opacity control */
    --theme-success: #3F704D; /* Forest green - symbolizes growth, life */
    --theme-success-rgb: 63, 112, 77; /* RGB values for theme-success for opacity control */
    --theme-shadow: rgba(58, 90, 120, 0.1); /* Based on primary for consistency */
    --theme-border: #E4DFD2; /* Standard border color */
    --theme-card-background: #FFFFFF; /* Standard card background */
    --theme-card-header: #F2EEE3; /* Standard card header background */
    --theme-heading: var(--theme-primary); /* Standard heading color */
    
    /* ===== HEADER & FOOTER ===== */
    --header-background: var(--theme-primary);
    --header-text: #FFFFFF;
    --header-border: var(--theme-secondary);
    --footer-background: var(--theme-primary);
    --footer-text: #FFFFFF;
    
    /* ===== BUTTONS ===== */
    --btn-primary-bg: var(--theme-primary);
    --btn-primary-text: #FFFFFF;
    --btn-primary-hover: #2C4B6A; /* Darker blue for hover state */
    
    --btn-secondary-bg: var(--theme-secondary);
    --btn-secondary-text: #2A3342; /* Dark text on gold for readability */
    --btn-secondary-hover: #B89959; /* Deeper gold for hover */
    
    --btn-tertiary-border: var(--theme-primary);
    --btn-tertiary-text: var(--theme-primary);
    --btn-tertiary-hover-bg: var(--theme-primary);
    --btn-tertiary-hover-text: #FFFFFF;
    
    --btn-disabled-bg: #D5D0C5;
    --btn-disabled-text: #7E7E7E;
    
    /* ===== PASSAGE DISPLAY ELEMENTS ===== */
    /* Container */
    --passage-display-bg: #F9F6EE; /* Slightly lighter than background */
    --passage-border: #E4DFD2; /* For borders with full opacity */
    --passage-border-light: #EDE9DD; /* Lighter border color */
    --passage-hover-bg: #F2EEE3; /* Background color for hover states */
    --passage-display-border: #E4DFD2; /* Subtle border */
    --passage-display-shadow: rgba(58, 90, 120, 0.04);
    
    /* Character Keys */
    --passage-key-bg: #F2EEE3; /* Soft ivory */
    --passage-key-text: var(--theme-text);
    --passage-key-shadow: rgba(58, 90, 120, 0.06);
    --passage-space-key-bg: #F2EEE3; /* Slightly darker for spaces */
    
    /* Character States */
    --passage-char-correct: #3F704D; /* Forest green */
    --passage-char-error: var(--theme-error);
    --passage-char-current: var(--theme-primary);
    --passage-char-current-bg: #F0F7FF; /* Light blue highlight */
    
    /* Current Character Animation */
    --passage-cursor-pulse-shadow: rgba(201, 169, 111, 0.4); /* Gold with opacity */
    --passage-cursor-pulse-fade: rgba(201, 169, 111, 0);
    
    /* Passage Reference */
    --passage-reference-text: var(--theme-primary);
    
    /* Scrollbar */
    --passage-scrollbar-track: var(--theme-background);
    --passage-scrollbar-thumb: #D5D0C5; /* Light tan */
    --passage-scrollbar-thumb-hover: #C2BDB1; /* Darker tan on hover */
    
    /* ===== TYPING STATS ===== */
    --stats-container-bg: #FFFFFF;
    --stats-container-border: #E4DFD2;
    --stats-container-shadow: rgba(58, 90, 120, 0.05);
    
    --stats-label-color: #5B7B9A; /* Lighter blue */
    --stats-value-color: var(--theme-primary);
    
    --stats-progress-track: #E4DFD2;
    --stats-progress-fill: var(--theme-secondary);
    
    /* ===== FORM ELEMENTS ===== */
    --input-border: #D5D0C5;
    --input-bg: #FFFFFF;
    --input-text: var(--theme-text);
    --input-focus-border: var(--theme-secondary);
    --input-focus-shadow: rgba(201, 169, 111, 0.15);
    
    /* Select Dropdowns */
    --select-arrow-color: var(--theme-text);
    --select-option-hover: #F2EEE3;
    --select-option-selected: #E9E5D9;
    
    /* Progress Steps */
    --progress-step-inactive-bg: #E9E5D9;
    --progress-step-inactive-text: var(--theme-text-light);
    --progress-step-active-bg: var(--theme-secondary);
    --progress-step-active-text: #2A3342;
    --progress-line-color: #D5D0C5;
    
    /* ===== CARDS & CONTAINERS ===== */
    --card-bg: #FFFFFF;
    --card-border: #E4DFD2;
    --card-shadow-light: rgba(58, 90, 120, 0.04);
    --card-shadow-medium: rgba(58, 90, 120, 0.07);
    --card-shadow-heavy: rgba(58, 90, 120, 0.1);
    
    /* ===== MISC UI ELEMENTS ===== */
    --help-tip-bg: rgba(213, 208, 197, 0.25);
    --help-tip-border: var(--theme-primary);
    
    --feature-bg: #FFFFFF;
    --feature-shadow: var(--theme-shadow);
    
    /* Missed Keys Panel */
    --missed-keys-popup-bg: #FFFFFF;
    --missed-keys-title-color: var(--theme-primary);
    --missed-keys-border: #E4DFD2;
    --expected-key-bg: rgba(167, 55, 55, 0.1);
    --expected-key-text: var(--theme-error);
    --missed-count-text: var(--theme-text-light);
    
    /* ===== RESULTS CARD & ELEMENTS ===== */
    --results-card-bg: var(--passage-display-bg);
    --results-card-border: var(--theme-success);
    --result-value-color: var(--theme-text);
    --result-label-color: var(--theme-text-light);
    
    /* Missed Keys Additional Colors */
    --view-missed-keys-bg: var(--theme-error);
    --view-missed-keys-text: #FFFFFF;
    --missed-keys-title-text: var(--theme-text);
    --missed-keys-border-line: var(--card-border);
    --missed-key-bg: var(--passage-key-bg);
    --missed-key-border: var(--card-border);
    --missed-key-count-color: var(--theme-text-light);
    
    /* ===== ANIMATION & SPECIAL EFFECTS ===== */
    --scripture-quote-bg: rgba(201, 169, 111, 0.1);
    --nav-pulse-shadow-start: rgba(201, 169, 111, 0.7);
    --nav-pulse-shadow-end: rgba(201, 169, 111, 0);
}