/* ===== CSS VARIABLES FILE ===== */ /* All CSS custom properties (variables) for the DonateBloodNow application */ :root { /* === CORE BRAND COLORS === */ --primary-color: #C62828; --primary-light: #E57373; --primary-dark: #B71C1C; --primary-ultra-dark: #8E1515; --primary-ultra-contrast: #6B1010; --secondary-color: #5B7B8D; --secondary-light: #7B9BAD; --secondary-dark: #4A6B7D; --secondary-ultra-dark: #394F5B; --accent-color: #6B8B7B; --accent-light: #8BAB9B; --accent-dark: #5B7B6B; --accent-ultra-dark: #4A6B5A; --accent-ultra-contrast: #3A5B4A; --accent-warm: #b39695; --accent-warm-light: #d0b4b2; /* === NEUTRAL COLORS === */ --white: #ffffff; --off-white: #faf9f8; --cream: #f6f4f2; --warm-white: #f8f6f4; /* Gray Scale */ --gray-50: #f7f6f5; --gray-100: #f0efed; --gray-200: #e6e4e1; --gray-300: #d5d2cd; --gray-400: #b8b3ad; --gray-500: #9c968f; --gray-600: #7d7871; --gray-700: #5f5a54; --gray-800: #464139; --gray-900: #2f2b26; /* === TEXT COLORS === */ --text-primary: #2f2b26; --text-secondary: #3d3832; --text-muted: #5a5451; --text-light: #6b6561; --text-ultra-dark: #1c1917; /* === FORM SPECIFIC VARIABLES === */ --background-color: var(--off-white); --card-background: var(--white); --border-color: var(--gray-200); --hover-color: var(--gray-100); --error-color: var(--primary-color); --success-color: var(--accent-color); --warning-color: #f59e0b; --primary-rgb: 198, 40, 40; --border-radius: 8px; /* === SEMANTIC COLORS === */ --success: #7a8471; --warning: #a69b94; --danger: #8b5a5c; --info: #6b8aaa; /* === BACKGROUND COLORS === */ --primary-bg-light: #f4f1f0; --secondary-bg-light: #f2f4f6; --accent-bg-light: #f3f4f2; --warm-bg-light: #f6f4f2; /* === COMPONENT COLORS === */ --left-menu-primary: var(--secondary-color); --left-menu-buttons: var(--secondary-dark); --right-menu-primary: var(--primary-color); --right-menu-buttons: var(--primary-dark); --button-primary-contrast: #8b5a5c; --button-secondary-contrast: #6b8aaa; --button-hover-primary: #6d4547; --button-hover-secondary: #546e8c; /* === DARK MODE COLORS === */ --dark-bg-primary: #1a1a1a; --dark-bg-secondary: #2d2d2d; --dark-text-primary: #ffffff; --dark-text-secondary: #e0e0e0; --dark-text-muted: #b0b0b0; /* === GLASS MORPHISM === */ --glass-light: rgba(255, 255, 255, 0.1); --glass-medium: rgba(255, 255, 255, 0.2); --glass-strong: rgba(255, 255, 255, 0.3); --glass-border: rgba(255, 255, 255, 0.2); --glass-dark: rgba(0, 0, 0, 0.1); --glass-dark-medium: rgba(0, 0, 0, 0.2); --glass-dark-strong: rgba(0, 0, 0, 0.3); /* === SHADOW COLORS === */ --shadow-light: rgba(0, 0, 0, 0.1); --shadow-medium: rgba(0, 0, 0, 0.2); --shadow-strong: rgba(0, 0, 0, 0.3); --shadow-colored-primary: rgba(229, 57, 53, 0.3); --shadow-colored-secondary: rgba(30, 136, 229, 0.3); /* === UTILITY COLORS === */ --emergency-red: #A68B6B; --emergency-red-light: #C4A484; --emergency-red-hover: #B89A7A; --emergency-red-dark: #8B7355; --social-facebook: #3b5998; --social-twitter: #1da1f2; --social-instagram: #dc2743; --social-whatsapp: #25d366; --gold: #ffd700; --gold-light: #fff8e7; --gold-dark: #fef7e0; /* Opacity Variants */ --primary-10: rgba(229, 57, 53, 0.1); --primary-20: rgba(229, 57, 53, 0.2); --primary-30: rgba(229, 57, 53, 0.3); --secondary-10: rgba(30, 136, 229, 0.1); --secondary-20: rgba(30, 136, 229, 0.2); --secondary-30: rgba(30, 136, 229, 0.3); --accent-10: rgba(0, 137, 123, 0.1); --accent-20: rgba(0, 137, 123, 0.2); --accent-30: rgba(0, 137, 123, 0.3); /* === BORDER COLORS === */ /* Consistent border colors */ --border-light: rgba(255, 255, 255, 0.1); --border-medium: rgba(255, 255, 255, 0.2); --border-strong: rgba(255, 255, 255, 0.3); --border-dark: rgba(0, 0, 0, 0.1); --border-primary: rgba(229, 57, 53, 0.3); --border-secondary: rgba(30, 136, 229, 0.3); /* === FORM COLORS === */ --text-strong: #0b1220; --text-default: #1f2937; --on-accent: #ffffff; /* Background gradients */ --bg-heart-logo: radial-gradient(circle at 30% 30%, rgba(229, 57, 53, 0.12), rgba(198, 40, 40, 0.08), rgba(183, 28, 28, 0.06)); /* Shadow colors */ --shadow-heart: 0 20px 60px rgba(229, 57, 53, 0.15); --shadow-heart-hover: 0 30px 80px rgba(229, 57, 53, 0.2); --shadow-text: 0 3px 6px rgba(0, 0, 0, 0.2); --shadow-text-light: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-text-medium: 0 2px 4px rgba(0, 0, 0, 0.15); /* Wave circle colors */ --wave-border: rgba(229, 57, 53, 0.4); --wave-shadow-inset: rgba(229, 57, 53, 0.15); --wave-shadow-outset: rgba(255, 255, 255, 0.9); /* Blood drop colors */ --blood-drop-shadow: rgba(220, 38, 38, 0.3); --blood-drop-shadow-light: rgba(220, 38, 38, 0.2); --blood-drop-shadow-medium: rgba(220, 38, 38, 0.4); --blood-drop-shadow-strong: rgba(220, 38, 38, 0.5); /* Toggle switch colors */ --toggle-bg: rgba(0, 0, 0, 0.85); --toggle-border: rgba(255, 255, 255, 0.3); --toggle-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); --toggle-label: #ccc; --toggle-switch-on: #ff4444; --toggle-switch-off: #22c55e; --toggle-slider-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); --toggle-status: #fff; /* Logo text colors */ --logo-blood: #c62828; --logo-blood-gradient: linear-gradient(180deg, #b91c1c 0%, #ef4444 60%, #b91c1c 100%); --logo-now-hover: #fbbf24; --tagline-color: #374151; --tagline-hover: #1f2937; /* Progress container colors */ --progress-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.12) 100%); --progress-border: rgba(255, 255, 255, 0.25); --progress-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.3); --progress-line-bg: rgba(0, 0, 0, 0.12); --progress-line-bg-light: rgba(0, 0, 0, 0.06); --progress-line-shimmer: linear-gradient(90deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 100%); /* Milestone dot colors */ --milestone-bg: #ffffff; --milestone-shadow: 0 0 0 2px rgba(0,0,0,0.15); /* Progress line colors */ --progress-line-shadow: 0 0 8px rgba(231, 76, 60, 0.3), 0 0 16px rgba(25, 118, 210, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4); --progress-tip-bg: rgba(255, 255, 255, 0.9); --progress-tip-shadow: 0 0 12px rgba(231, 76, 60, 0.50), 0 0 8px rgba(25, 118, 210, 0.35); /* Time left colors */ --time-left-bg: rgba(231, 76, 60, 0.08); --time-left-bg-hover: rgba(231, 76, 60, 0.12); --time-left-border: rgba(231, 76, 60, 0.3); /* Progress percentage colors */ --progress-percent-bg: rgba(25, 118, 210, 0.10); --progress-percent-border: rgba(25, 118, 210, 0.25); /* Achievement badge colors */ --achievement-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)); --achievement-border: rgba(255, 255, 255, 0.5); --achievement-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 2px 1px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.1); --achievement-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.2), inset 0 2px 1px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.15); --achievement-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* Form input colors */ --form-input-bg: rgba(255, 255, 255, 0.92); --form-input-border: rgba(0, 0, 0, 0.12); --form-input-shadow: 0 6px 20px rgba(0,0,0,0.06); --form-input-focus-border: 2px solid var(--primary-color); --form-input-focus-shadow: 0 0 30px rgba(231, 76, 60, 0.3); --form-input-focus-bg: rgba(255, 255, 255, 0.9); --form-input-placeholder: rgba(0,0,0,0.4); /* Achievement step colors */ --achievement-step-1: linear-gradient(135deg, #ff7e5f, #feb47b); --achievement-step-1-border: #ff7e5f; --achievement-step-1-shadow: 0 0 25px rgba(255, 126, 95, 0.7); --achievement-step-2: linear-gradient(135deg, #6a82fb, #fc5c7d); --achievement-step-2-border: #6a82fb; --achievement-step-2-shadow: 0 0 25px rgba(106, 130, 251, 0.7); --achievement-step-3: linear-gradient(135deg, #89d4cf, #659999); --achievement-step-3-border: #89d4cf; --achievement-step-3-shadow: 0 0 25px rgba(137, 212, 207, 0.7); --achievement-step-4: linear-gradient(135deg, #00b09b, #96c93d); --achievement-step-4-border: #00b09b; --achievement-step-4-shadow: 0 0 25px rgba(0, 176, 155, 0.7); --achievement-step-5: linear-gradient(135deg, #a770ef, #cf8bf3, #fdb99b); --achievement-step-5-border: #a770ef; --achievement-step-5-shadow: 0 0 25px rgba(167, 112, 239, 0.7); --achievement-step-6: linear-gradient(135deg, #fdd835, #f57f17); --achievement-step-6-border: #fdd835; --achievement-step-6-shadow: 0 0 25px rgba(253, 216, 53, 0.7); /* Progress phase colors */ --progress-early: linear-gradient(90deg, #e57373, #64b5f6, #80cbc4); --progress-mid: linear-gradient(90deg, #e53935, #1e88e5, #26a69a); --progress-late: linear-gradient(90deg, #c62828, #1565c0, #00897b); /* Radio group colors */ --radio-group-bg: rgba(255, 255, 255, 0.95); --radio-option-bg: rgba(255,255,255,0.9); --radio-option-border: rgba(0,0,0,0.1); --radio-option-hover-border: var(--primary-color); --radio-option-hover-shadow: 0 8px 25px rgba(231, 76, 60, 0.2); --radio-option-checked-bg: rgba(231, 76, 60, 0.15); --radio-option-checked-border: var(--primary-color); --radio-option-checked-shadow: 0 4px 12px rgba(231, 76, 60, 0.2); /* Field error colors */ --field-error-color: #b91c1c; --field-error-bg: rgba(185, 28, 28, 0.08); --field-error-border: rgba(185, 28, 28, 0.25); --field-invalid-outline: 2px solid #ef4444; /* Navigation button colors */ --nav-btn-bg: rgba(255, 255, 255, 0.92); --nav-btn-border: 2px solid rgba(0,0,0,0.1); --nav-btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); --nav-btn-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); --btn-next-hover: linear-gradient(135deg, #8b1313, #0b3a82); --btn-reset-bg: #ffffff; --btn-reset-color: #dc2626; --btn-reset-border: 2px solid rgba(220, 38, 38, 0.35); --btn-reset-hover-bg: rgba(255,255,255,0.95); --btn-reset-hover-border: rgba(220, 38, 38, 0.6); --btn-reset-hover-color: #b91c1c; /* Form help colors */ --form-help-color: #4b5563; --form-help-bg: rgba(255,255,255,0.86); --form-help-border: rgba(0,0,0,0.06); --form-help-shadow: 0 1px 1px rgba(0,0,0,0.35); /* AI assistant colors */ --ai-bg: var(--glass-light); --ai-border: var(--glass-border); --ai-message-bg: rgba(255, 255, 255, 0.2); --ai-message-border: rgba(255, 255, 255, 0.3); --ai-message-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); --ai-explainer-bg: rgba(30, 136, 229, 0.1); --ai-explainer-border: rgba(30, 136, 229, 0.2); --ai-explainer-shadow: 0 3px 10px rgba(30, 136, 229, 0.1); /* Dark mode tagline colors */ --tagline-dark-color: #e2e8f0; --tagline-dark-bg: linear-gradient(90deg, #42a5f5 0%, #ef5350 50%, #26a69a 100%); --tagline-dark-shadow: 0 0 15px rgba(66, 165, 245, 0.3); --tagline-reduced-bg: #334155; /* Scrollbar colors */ --scrollbar-thumb: rgba(0,0,0,0.3); --scrollbar-thumb-hover: rgba(0,0,0,0.5); /* Agreement option colors */ --agree-bg: rgba(255, 255, 255, 0.95); --agree-border: rgba(0, 0, 0, 0.15); --agree-color: #333; /* === COMPLEX SHADOWS === */ --shadow-soft-complex: 0 15px 35px rgba(50, 50, 93, 0.06), 0 5px 15px rgba(0, 0, 0, 0.07); --shadow-medium-complex: 0 20px 40px rgba(50, 50, 93, 0.1), 0 10px 20px rgba(0, 0, 0, 0.1); --shadow-strong-complex: 0 25px 50px rgba(50, 50, 93, 0.15), 0 15px 25px rgba(0, 0, 0, 0.15); /* === BODY COLORS === */ --body-bg-light: #f8f6f4; --body-color-light: #2f2b26; --body-bg-dark: #0a0e15; --body-color-dark: #f1f5f9; /* === EXTENDED UTILITY COLORS === */ --slate-600: #64748b; --blue-400: #60a5fa; --slate-100: #f1f5f9; --slate-900: #0f172a; --gray-333: #333; /* === LOADING OVERLAY COLORS === */ /* Loading screen specific colors */ --loading-bg-light: linear-gradient(135deg, rgba(249,248,246,1) 0%, rgba(247,245,242,1) 100%); --loading-bg-dark: linear-gradient(135deg, rgba(10,14,21,0.98) 0%, rgba(20,25,35,0.95) 100%); --loading-container-bg: rgba(240,250,240,0.18); --loading-shadow: 0 12px 48px rgba(0,0,0,0.06); /* === SKIP LINK COLORS === */ /* Accessibility skip link colors */ --skip-link-bg: var(--primary-color, #1E88E5); --skip-link-color: #fff; --skip-link-outline: 3px solid rgba(0,0,0,0.08); --skip-link-shadow: 0 6px 20px rgba(0,0,0,0.12); /* === LOGO SPECIFIC COLORS === */ /* Logo word gradients */ --donate-gradient: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%); --donate-gradient-hover: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #60a5fa 100%); --donate-shadow: 0 2px 6px rgba(30, 64, 175, 0.3); --donate-shadow-hover: 0 4px 12px rgba(30, 64, 175, 0.5), 0 0 20px rgba(30, 64, 175, 0.3); --blood-gradient: linear-gradient(135deg, #dc2626 0%, #b91c1c 30%, #7f1d1d 70%, #991b1b 100%); --blood-gradient-hover: linear-gradient(135deg, #ef4444 0%, #dc2626 30%, #991b1b 70%, #7f1d1d 100%); --blood-shadow: 0 4px 12px rgba(185, 28, 28, 0.4); --blood-shadow-hover: 0 6px 20px rgba(185, 28, 28, 0.5), 0 0 30px rgba(185, 28, 28, 0.3); --now-gradient: linear-gradient(45deg, #059669 0%, #10b981 50%, #34d399 100%); --now-gradient-hover: linear-gradient(45deg, #047857 0%, #10b981 50%, #6ee7b7 100%); --now-shadow: 0 2px 6px rgba(5, 150, 105, 0.3); --now-shadow-hover: 0 4px 12px rgba(5, 150, 105, 0.5), 0 0 20px rgba(5, 150, 105, 0.3); /* Heart logo colors */ --heart-logo-gradient-1: radial-gradient(circle at 25% 25%, rgba(220, 38, 38, 0.4) 0%, transparent 45%); --heart-logo-gradient-2: radial-gradient(circle at 75% 35%, rgba(34, 197, 94, 0.35) 0%, transparent 45%); --heart-logo-gradient-3: radial-gradient(circle at 50% 75%, rgba(59, 130, 246, 0.3) 0%, transparent 45%); --heart-logo-gradient-4: radial-gradient(circle at 20% 80%, rgba(251, 191, 36, 0.25) 0%, transparent 45%); --heart-logo-gradient-main: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(34, 197, 94, 0.12) 33%, rgba(59, 130, 246, 0.12) 66%, rgba(251, 191, 36, 0.1) 100%); --heart-logo-box-shadow: 0 20px 60px rgba(220, 38, 38, 0.3), 0 15px 40px rgba(34, 197, 94, 0.2), 0 10px 25px rgba(59, 130, 246, 0.15), 0 5px 15px rgba(251, 191, 36, 0.1); --heart-logo-box-shadow-hover: 0 25px 70px rgba(229, 57, 53, 0.2); /* Wave circle colors */ --wave-circle-border: 3px solid rgba(239, 68, 68, 0.8); --wave-circle-shadow: inset 3px 3px 8px rgba(55, 84, 170, 0.2), 3px 3px 8px rgba(55, 84, 170, 0.2), inset -3px -3px 8px rgba(255, 255, 255, 0.1), -3px -3px 8px rgba(255, 255, 255, 0.1); /* Tagline colors */ --tagline-color: #dc2626; --tagline-color-hover: #ef4444; --tagline-shadow: 0 1px 3px rgba(220, 38, 38, 0.3), 0 0 8px rgba(220, 38, 38, 0.2); /* Theme toggle colors */ --theme-toggle-bg: rgba(255, 255, 255, 0.02); --theme-toggle-border: 1px solid rgba(255, 255, 255, 0.05); --theme-endpoint-bg: rgba(255, 255, 255, 0.08); --theme-endpoint-bg-hover: rgba(255, 255, 255, 0.2); --theme-line-gradient: linear-gradient(90deg, rgba(96, 165, 250, 0.2) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(251, 191, 36, 0.2) 100%); /* Dark mode logo colors */ --tagline-dark-color: #ef4444; /* === BLOOD DROPS COLORS === */ /* Blood drop animation colors */ --blood-drop-color: #8B0000; --blood-drop-shadow: 0 2px 4px rgba(139, 0, 0, 0.6); --blood-drop-text-shadow: 0 0 2px rgba(139, 0, 0, 0.3); --blood-drop-shadow-mobile: 0 1px 3px rgba(139, 0, 0, 0.5); --blood-drop-text-shadow-mobile: 0 0 1px rgba(139, 0, 0, 0.2); /* === COMMON SHADOW COLORS === */ /* Common shadow values used across components */ --shadow-black-20: rgba(0, 0, 0, 0.2); --shadow-black-30: rgba(0, 0, 0, 0.3); --shadow-white-30: rgba(255, 255, 255, 0.3); /* === REGISTRATION FORM COLORS === */ /* Common white alpha variations */ --white-alpha-100: rgba(255, 255, 255, 1); --white-alpha-90: rgba(255, 255, 255, 0.9); --white-alpha-80: rgba(255, 255, 255, 0.8); --white-alpha-60: rgba(255, 255, 255, 0.6); --white-alpha-50: rgba(255, 255, 255, 0.5); --white-alpha-40: rgba(255, 255, 255, 0.4); --white-alpha-30: rgba(255, 255, 255, 0.3); --white-alpha-20: rgba(255, 255, 255, 0.2); --white-alpha-0: rgba(255, 255, 255, 0); /* Common black alpha variations */ --black-alpha-06: rgba(0, 0, 0, 0.06); --black-alpha-10: rgba(0, 0, 0, 0.1); --black-alpha-15: rgba(0, 0, 0, 0.15); --black-alpha-20: rgba(0, 0, 0, 0.2); --black-alpha-30: rgba(0, 0, 0, 0.3); /* Primary color alpha variations */ --primary-alpha-10: rgba(229, 57, 53, 0.1); --primary-alpha-20: rgba(229, 57, 53, 0.2); --primary-alpha-30: rgba(229, 57, 53, 0.3); --primary-alpha-40: rgba(229, 57, 53, 0.4); --primary-alpha-50: rgba(229, 57, 53, 0.5); --primary-alpha-60: rgba(229, 57, 53, 0.6); /* Secondary color alpha variations */ --secondary-alpha-10: rgba(30, 136, 229, 0.1); --secondary-alpha-20: rgba(30, 136, 229, 0.2); /* Accent color alpha variations */ --accent-alpha-20: rgba(0, 137, 123, 0.2); --accent-alpha-28: rgba(0, 137, 123, 0.28); /* Dark red variations for text stroke */ --dark-red-alpha-15: rgba(139, 0, 0, 0.15); --dark-red-alpha-20: rgba(139, 0, 0, 0.2); --dark-red-alpha-30: rgba(139, 0, 0, 0.3); --dark-red-alpha-40: rgba(139, 0, 0, 0.4); /* Specific hex colors found in registration form */ --slate-200: #e2e8f0; /* === MISSING COLORS (NEWLY ADDED) === */ /* Pure colors */ --pure-black: #000000; /* Green variations */ --green-success: #2ed573; --green-success-light: #17d05c; --green-teal-dark: #064e3b; --green-teal-darker: #065f46; --green-primary: #0d9488; --green-accent: #0f766e; /* Blue variations */ --blue-primary: #1976d2; --blue-dark: #1e3a8a; --blue-ultra-dark: #0d47a1; /* Gray variations */ --gray-222: #222; --gray-2c: #2c2c2c; --gray-333: #333333; --gray-666: #666; --gray-666-full: #666666; --gray-600: #6b7280; --gray-slate-400: #94a3b8; --gray-slate-300: #d1d5db; --gray-light: #ddd; --gray-muted: #d0d0d0; /* Brown/Earth tones */ --brown-light: #6A7264; --brown-medium: #6B5A42; --brown-accent: #7A8471; --brown-primary: #8B7355; /* Maroon/Dark red tones */ --maroon-primary: #8b1538; --maroon-dark: #6b1029; /* Background variations */ --bg-neutral-100: #f3f4f6; --bg-neutral-50: #f7f5f2; --bg-neutral-light: #f8f6f3; --bg-neutral-ultra-light: #f8fafc; --bg-warm-ultra-light: #f9f8f6; /* Red variations (emergency/error) */ --red-light: #ff9999; --red-medium: #ff6b6b; --red-medium-light: #ff8a80; --red-bright: #ff5252; --red-text: #f87171; /* Success accent */ --success-light: #60efbe; /* Orange/Warning variations */ --orange-amber: #d97706; /* === DARK MODE ALTERNATIVES FOR NEW COLORS === */ --green-success-dark: #059669; --blue-primary-dark: #1565c0; --brown-accent-dark: #5B7B6B; --maroon-primary-dark: #6B1010; --red-medium-dark: #dc2626; --gray-neutral-dark: #374151; } /* === DARK MODE OVERRIDES === */ @media (prefers-color-scheme: dark) { :root { /* Override colors for system dark mode */ --green-success: var(--green-success-dark); --blue-primary: var(--blue-primary-dark); --brown-accent: var(--brown-accent-dark); --maroon-primary: var(--maroon-primary-dark); --red-medium: var(--red-medium-dark); --gray-neutral: var(--gray-neutral-dark); /* Enhanced contrast for readability */ --text-primary: var(--dark-text-primary); --text-secondary: var(--dark-text-secondary); --text-muted: var(--dark-text-muted); /* Background adjustments */ --bg-neutral-light: var(--dark-bg-secondary); --bg-warm-ultra-light: var(--dark-bg-primary); } } /* === MANUAL DARK MODE CLASS OVERRIDES === */ body.dark-mode { /* Override colors when dark mode is manually enabled */ --green-success: var(--green-success-dark); --blue-primary: var(--blue-primary-dark); --brown-accent: var(--brown-accent-dark); --maroon-primary: var(--maroon-primary-dark); --red-medium: var(--red-medium-dark); --gray-neutral: var(--gray-neutral-dark); } /* === END OF VARIABLES === */