/* ===================================================================
   COLOR CONSISTENCY FIX - Prevent Tone & Color Degradation
   Ensures vibrant, readable colors in both light and dark themes
   across ALL pages, modals, prompts, and components
   =================================================================== */

/* ===== ENHANCED ROOT VARIABLES WITH PROPER CONTRAST ===== */
:root {
  /* Core Background & Foreground - Light Mode (Optimized) */
  --background: 210 25% 98%;          /* Slightly warmer, not pure white */
  --foreground: 220 25% 18%;          /* Deeper, more readable black */
  --muted: 210 25% 95%;               /* Clearer muted */
  --muted-foreground: 220 15% 42%;    /* Better contrast */
  --border: 214 25% 85%;              /* More visible borders */
  
  /* Primary Colors - Enhanced Vibrancy */
  --primary: 211 100% 50%;            /* Richer blue, better contrast */
  --primary-foreground: 0 0% 100%;    /* Pure white */
  --primary-hover: 211 100% 45%;      /* Darker hover state */
  
  /* Status Colors - More Vibrant */
  --success: 142 76% 38%;             /* Richer green */
  --success-bg: 142 76% 96%;          /* Light green background */
  --warning: 38 92% 52%;              /* Vibrant yellow */
  --warning-bg: 38 100% 96%;          /* Light yellow background */
  --danger: 0 84% 58%;                /* Vibrant red */
  --danger-bg: 0 84% 96%;             /* Light red background */
  --info: 200 98% 48%;                /* Vibrant blue */
  --info-bg: 200 100% 96%;            /* Light blue background */
  
  /* Card & Surface Colors */
  --card-bg: 0 0% 100%;
  --card-border: 214 25% 88%;
  
  /* Shadow Colors - Properly Visible */
  --shadow-sm: 220 20% 20% / 0.08;
  --shadow-md: 220 20% 20% / 0.12;
  --shadow-lg: 220 20% 20% / 0.18;
  --shadow-xl: 220 20% 20% / 0.25;
}

/* ===== DARK MODE - PREVENT CRUSHING & COLOR LOSS ===== */
.dark {
  /* Core Background & Foreground - Dark Mode (Anti-Crush) */
  --background: 224 65% 8%;           /* Lifted from 6% - prevents crushing */
  --foreground: 213 31% 93%;          /* Brighter white for readability */
  --muted: 223 47% 13%;               /* Lifted from 11% */
  --muted-foreground: 215 16% 63%;    /* Better visibility */
  --border: 216 34% 22%;              /* More visible borders */
  
  /* Primary Colors - Enhanced Glow */
  --primary: 211 100% 62%;            /* Brighter blue with glow */
  --primary-foreground: 224 71% 10%;  /* Dark contrast */
  --primary-hover: 211 100% 68%;      /* Brighter hover */
  
  /* Status Colors - Vibrant Dark Mode */
  --success: 142 76% 52%;             /* Bright green */
  --success-bg: 142 50% 18%;          /* Visible dark green bg */
  --warning: 38 92% 58%;              /* Bright yellow */
  --warning-bg: 38 60% 18%;           /* Visible dark yellow bg */
  --danger: 0 84% 68%;                /* Bright red */
  --danger-bg: 0 60% 18%;             /* Visible dark red bg */
  --info: 200 98% 60%;                /* Bright blue */
  --info-bg: 200 70% 18%;             /* Visible dark blue bg */
  
  /* Card & Surface Colors - Anti-Crush Levels */
  --card-bg: 224 65% 10%;             /* Lifted from 7% */
  --card-border: 216 34% 20%;         /* More visible */
  
  /* Surface Hierarchy - Proper Separation */
  --dark-surface-1: 224 65% 10%;      /* Base surface - lifted */
  --dark-surface-2: 215 30% 18%;      /* Mid surface - more contrast */
  --dark-surface-3: 215 25% 26%;      /* Top surface - clear separation */
  --dark-surface-hover: 215 25% 32%;  /* Hover state - distinct */
  
  /* Shadow Colors - Visible in Dark Mode */
  --shadow-sm: 224 71% 4% / 0.3;
  --shadow-md: 224 71% 4% / 0.4;
  --shadow-lg: 224 71% 4% / 0.5;
  --shadow-xl: 224 71% 4% / 0.6;
  
  /* Glow Effects - Enhanced */
  --glow-primary: 211 100% 62% / 0.3;
  --glow-success: 142 76% 52% / 0.3;
  --glow-warning: 38 92% 58% / 0.3;
  --glow-danger: 0 84% 68% / 0.3;
}

/* ===== COOKIE BANNER & MODALS - CONSISTENT COLORS ===== */

/* Cookie Banner - Light Mode */
#cookie-banner {
  background-color: hsl(0 0% 100% / 0.98) !important;
  border-top-color: hsl(var(--primary) / 0.2) !important;
  box-shadow: 0 -10px 40px hsl(var(--shadow-xl)) !important;
}

#cookie-banner .text-foreground {
  color: hsl(var(--foreground)) !important;
}

#cookie-banner .text-muted-foreground {
  color: hsl(var(--muted-foreground)) !important;
}

/* Cookie Banner - Dark Mode */
.dark #cookie-banner {
  background-color: hsl(var(--dark-surface-1) / 0.98) !important;
  border-top-color: hsl(var(--primary) / 0.4) !important;
  box-shadow: 0 -10px 40px hsl(0 0% 0% / 0.5) !important;
}

.dark #cookie-banner .text-foreground {
  color: hsl(var(--foreground)) !important;
}

.dark #cookie-banner .text-muted-foreground {
  color: hsl(var(--muted-foreground)) !important;
}

/* Cookie Modal - Light Mode */
#cookie-modal .bg-white {
  background-color: hsl(0 0% 100%) !important;
}

#cookie-modal .border-border {
  border-color: hsl(var(--card-border)) !important;
}

/* Cookie Modal - Dark Mode */
.dark #cookie-modal .bg-white,
.dark #cookie-modal .dark\:bg-dark-surface-1 {
  background-color: hsl(var(--dark-surface-1)) !important;
}

.dark #cookie-modal .border-border,
.dark #cookie-modal .dark\:border-dark-surface-3 {
  border-color: hsl(var(--dark-surface-3)) !important;
}

/* Cookie Preference Cards - Proper Contrast */
#cookie-modal .bg-muted\/30 {
  background-color: hsl(var(--muted) / 0.3) !important;
}

.dark #cookie-modal .bg-muted\/30 {
  background-color: hsl(var(--dark-surface-2) / 0.5) !important;
}

/* Info Boxes in Cookie Modal */
#cookie-modal .bg-blue-50 {
  background-color: hsl(var(--info-bg)) !important;
}

#cookie-modal .text-blue-800 {
  color: hsl(200 98% 35%) !important;
}

.dark #cookie-modal .dark\:bg-blue-900\/20 {
  background-color: hsl(var(--info-bg)) !important;
}

.dark #cookie-modal .dark\:text-blue-300 {
  color: hsl(var(--info)) !important;
}

/* ===== ERROR PAGES - CONSISTENT COLORS ===== */

/* Error Pages - Text Visibility */
.error-page .text-foreground,
.error-page h1,
.error-page h2,
.error-page p {
  color: hsl(var(--foreground)) !important;
}

.error-page .text-muted-foreground {
  color: hsl(var(--muted-foreground)) !important;
}

/* Dark Mode Error Pages */
.dark .error-page .text-foreground,
.dark .error-page h1,
.dark .error-page h2,
.dark .error-page p {
  color: hsl(var(--foreground)) !important;
  text-shadow: 0 0 1px hsl(var(--foreground) / 0.1);
}

.dark .error-page .text-muted-foreground {
  color: hsl(var(--muted-foreground)) !important;
}

/* ===== FLASH MESSAGES - VIBRANT COLORS ===== */

/* Success Messages */
.bg-green-50\/95 {
  background-color: hsl(var(--success-bg) / 0.95) !important;
}

.text-green-700 {
  color: hsl(var(--success)) !important;
}

.border-green-500 {
  border-color: hsl(var(--success)) !important;
}

.dark .dark\:bg-green-900\/30 {
  background-color: hsl(var(--success-bg) / 0.95) !important;
}

.dark .dark\:text-green-300 {
  color: hsl(var(--success)) !important;
}

/* Error Messages */
.bg-red-50\/95 {
  background-color: hsl(var(--danger-bg) / 0.95) !important;
}

.text-red-700 {
  color: hsl(var(--danger)) !important;
}

.border-red-500 {
  border-color: hsl(var(--danger)) !important;
}

.dark .dark\:bg-red-900\/30 {
  background-color: hsl(var(--danger-bg) / 0.95) !important;
}

.dark .dark\:text-red-300 {
  color: hsl(var(--danger)) !important;
}

/* Warning Messages */
.bg-yellow-50\/95 {
  background-color: hsl(var(--warning-bg) / 0.95) !important;
}

.text-yellow-700 {
  color: hsl(38 92% 40%) !important;
}

.border-yellow-500 {
  border-color: hsl(var(--warning)) !important;
}

.dark .dark\:bg-yellow-900\/30 {
  background-color: hsl(var(--warning-bg) / 0.95) !important;
}

.dark .dark\:text-yellow-300 {
  color: hsl(var(--warning)) !important;
}

/* Info Messages */
.bg-blue-50\/95 {
  background-color: hsl(var(--info-bg) / 0.95) !important;
}

.text-blue-700 {
  color: hsl(var(--info)) !important;
}

.border-blue-500 {
  border-color: hsl(var(--info)) !important;
}

.dark .dark\:bg-blue-900\/30 {
  background-color: hsl(var(--info-bg) / 0.95) !important;
}

.dark .dark\:text-blue-300 {
  color: hsl(var(--info)) !important;
}

/* ===== BUTTON CONSISTENCY ===== */

/* Primary Buttons */
.btn-primary {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 2px solid hsl(var(--primary)) !important;
}

.btn-primary:hover {
  background-color: hsl(var(--primary-hover)) !important;
  box-shadow: 0 0 20px hsl(var(--glow-primary)) !important;
}

.dark .btn-primary {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 2px solid hsl(var(--primary)) !important;
  box-shadow: 0 0 15px hsl(var(--glow-primary)) !important;
}

.dark .btn-primary:hover {
  background-color: hsl(var(--primary-hover)) !important;
  box-shadow: 0 0 25px hsl(var(--glow-primary)) !important;
}

/* Outline Buttons */
.btn-outline {
  border: 2px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}

.btn-outline:hover {
  background-color: hsl(var(--muted)) !important;
}

.dark .btn-outline {
  border: 2px solid hsl(var(--dark-surface-3)) !important;
  color: hsl(var(--foreground)) !important;
}

.dark .btn-outline:hover {
  background-color: hsl(var(--dark-surface-2)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

/* ===== TOGGLE SWITCHES - VISIBLE IN BOTH MODES ===== */

/* Cookie Toggle Base */
.peer:checked ~ div {
  background-color: hsl(var(--primary)) !important;
}

.peer ~ div {
  background-color: hsl(214 20% 75%) !important;
}

.dark .peer ~ div {
  background-color: hsl(215 15% 35%) !important;
}

.dark .peer:checked ~ div {
  background-color: hsl(var(--primary)) !important;
}

/* Toggle Inner Circle */
.peer ~ div::after {
  background-color: hsl(0 0% 100%) !important;
}

.dark .peer ~ div::after {
  background-color: hsl(0 0% 100%) !important;
}

/* ===== FORM ELEMENTS - CONSISTENT STYLING ===== */

input, textarea, select {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.dark input,
.dark textarea,
.dark select {
  background-color: hsl(var(--dark-surface-2)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--dark-surface-3)) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1) !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 3px hsl(var(--glow-primary)) !important;
}

/* ===== BACKDROP & OVERLAY CONSISTENCY ===== */

/* Modal Overlays */
.fixed.inset-0.bg-black {
  background-color: hsl(220 20% 10% / 0.5) !important;
}

.dark .fixed.inset-0.bg-black {
  background-color: hsl(224 71% 4% / 0.7) !important;
}

/* Backdrop Blur */
.backdrop-blur-sm {
  backdrop-filter: blur(4px) !important;
}

.backdrop-blur-lg {
  backdrop-filter: blur(16px) !important;
}

.backdrop-blur-xl {
  backdrop-filter: blur(24px) !important;
}

/* ===== LINK COLORS ===== */

a {
  color: hsl(var(--primary)) !important;
}

a:hover {
  color: hsl(var(--primary-hover)) !important;
}

.dark a {
  color: hsl(var(--primary)) !important;
}

.dark a:hover {
  color: hsl(var(--primary-hover)) !important;
}

/* ===== ACCESSIBILITY - FOCUS RINGS ===== */

*:focus-visible {
  outline: 2px solid hsl(var(--primary)) !important;
  outline-offset: 2px !important;
}

.dark *:focus-visible {
  outline: 2px solid hsl(var(--primary)) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px hsl(var(--glow-primary)) !important;
}

/* ===== PREVENT COLOR WASH-OUT ===== */

/* Ensure minimum contrast ratios */
.text-foreground {
  color: hsl(var(--foreground)) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dark .text-foreground {
  color: hsl(var(--foreground)) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== SHADOWS - PROPER VISIBILITY ===== */

.shadow-sm {
  box-shadow: 0 1px 2px 0 hsl(var(--shadow-sm)) !important;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px hsl(var(--shadow-md)),
              0 2px 4px -2px hsl(var(--shadow-sm)) !important;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px hsl(var(--shadow-lg)),
              0 4px 6px -4px hsl(var(--shadow-md)) !important;
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px hsl(var(--shadow-xl)),
              0 8px 10px -6px hsl(var(--shadow-lg)) !important;
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px hsl(var(--shadow-xl)) !important;
}

/* ===== GLASSMORPHISM - PROPER OPACITY ===== */

.glass-effect {
  background-color: hsl(var(--card-bg) / 0.7) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid hsl(var(--border) / 0.3) !important;
}

.dark .glass-effect {
  background-color: hsl(var(--dark-surface-1) / 0.7) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid hsl(var(--dark-surface-3) / 0.3) !important;
}

/* ===== ANTI-CRUSH GUARANTEE ===== */

/* Force minimum lightness in dark mode */
.dark * {
  /* Prevent background colors from going below 8% lightness */
  --min-lightness: 8%;
}

/* Force minimum contrast for text */
.dark .text-foreground,
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark p, .dark span, .dark div {
  /* Ensure text is always bright enough */
  --text-min-lightness: 85%;
}

/* ===== PRINT STYLES - MAINTAIN COLORS ===== */

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ===== END OF COLOR CONSISTENCY FIX ===== */