/* ==========================================================================
   THE WATER PROJECT DESIGN SYSTEM 2025 - THEME SYSTEM
   ========================================================================== */

/* 
 * Theme implementations based on colors.md specifications
 * Each theme provides a complete color palette for different content types
 * and user experiences while maintaining brand consistency.
 */

/* ========================================
   THEME A: OCEAN SLATE (Default)
   Clean, trustworthy, product-focused
   Use for: dashboards, donor accounts, maps
   ======================================== */

:root,
[data-theme="ocean-slate"],
.theme-ocean-slate {
  /* Primary colors */
  --primary: var(--brand-blue);        /* #2D6484 */
  --primary-hover: #1a4056;
  --primary-light: color-mix(in oklab, var(--brand-blue), white 90%);
  --primary-lighter: color-mix(in oklab, var(--brand-blue), white 95%);
  
  /* Text colors (cool neutrals) */
  --text-primary: #0F172A;      /* Ink - darkest text */
  --text-secondary: #1F2937;    /* Slate - secondary text */
  --text-muted: #6B7280;        /* Lighter text for meta info */
  
  /* Background and surface colors */
  --background: #FFFFFF;
  --surface: #F8FAFC;          /* Card/section backgrounds */
  --surface-elevated: #FFFFFF;  /* Elevated cards */
  
  /* Border colors */
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-light: #F1F5F9;
  
  /* Accent colors specific to Ocean Slate */
  --accent-primary: #0EA5A9;    /* Teal - water science */
  --accent-secondary: #4338CA;  /* Indigo - depth/headers */
  --accent-light: #CFFAFE;
  
  /* Interactive states */
  --hover-overlay: rgba(45, 100, 132, 0.05);
  --active-overlay: rgba(45, 100, 132, 0.1);
  --focus-ring: rgba(45, 100, 132, 0.2);
  
  /* Theme gradients - Single color with tonal variation */
  --gradient-primary: linear-gradient(135deg, #2D6484 0%, #1e4a5f 100%); /* Blue to darker blue */
  --gradient-cta: linear-gradient(135deg, #2D6484 0%, #1a4056 100%); /* Consistent blue gradient */
  
  /* Solid color gradients for depth and richness */
  --gradient-ocean: linear-gradient(135deg, #2D6484 0%, #1e4a5f 100%); /* Ocean blue gradient */
  --gradient-ocean-deep: linear-gradient(135deg, #2D6484 0%, #1a4056 100%); /* Deeper ocean gradient */
  
  /* Gradient color stops for component use */
  --gradient-start: #2D6484;
  --gradient-end: #1e4a5f;
  --gradient-start-5: rgba(45, 100, 132, 0.05);
  --gradient-start-10: rgba(45, 100, 132, 0.1);
  --gradient-start-20: rgba(45, 100, 132, 0.2);
  --gradient-end-5: rgba(30, 74, 95, 0.05);
  --gradient-end-10: rgba(30, 74, 95, 0.1);
  --gradient-end-20: rgba(30, 74, 95, 0.2);
  --gradient-overlay: linear-gradient(135deg, rgba(45, 100, 132, 0.7) 0%, rgba(30, 74, 95, 0.75) 100%); /* Reduced opacity for better image visibility */
  
  /* Text overlay colors for gradients */
  --gradient-text-primary: #FFFFFF;
  --gradient-text-secondary: rgba(255, 255, 255, 0.95);
  --gradient-text-muted: rgba(255, 255, 255, 0.85);
  
  /* Button overrides for this theme */
  --btn-primary-bg: var(--primary);
  --btn-primary-color: #FFFFFF;
  --btn-primary-hover-bg: var(--primary-hover);
  --btn-primary-border: var(--primary);
  --btn-secondary-bg: transparent;
  --btn-secondary-color: var(--primary);
  --btn-secondary-hover-bg: var(--primary);
  --btn-secondary-hover-color: #FFFFFF;
  --btn-secondary-border: var(--primary);
  --btn-donate-bg: #DC2626;
  --btn-donate-color: #FFFFFF;
  --btn-donate-hover-bg: #B91C1C;
  --btn-donate-border: #DC2626;
  
  /* Ocean Slate: Professional data-focused colors using theme accents */
  --btn-success-bg: #22C55E; /* Universal green for success */
  --btn-success-hover-bg: #16A34A;
  --btn-warning-bg: #F59E0B; /* Universal amber for warning */
  --btn-warning-hover-bg: #D97706;
  --btn-danger-bg: #7C2D12; /* Deep brown - distinct from donate red */
  --btn-danger-hover-bg: #991B1B;
}

/* Explicit button overrides for Ocean Slate with higher specificity */
.motif-2025[data-theme="ocean-slate"] .btn--primary,
.motif-2025.theme-ocean-slate .btn--primary {
  background: #2D6484 !important;
  border-color: #2D6484 !important;
}

.motif-2025[data-theme="ocean-slate"] .btn--primary:hover,
.motif-2025.theme-ocean-slate .btn--primary:hover {
  background: #1a4056 !important;
  border-color: #1a4056 !important;
}

.motif-2025[data-theme="ocean-slate"] .btn--secondary,
.motif-2025.theme-ocean-slate .btn--secondary {
  color: #2D6484 !important;
  border-color: #2D6484 !important;
}

.motif-2025[data-theme="ocean-slate"] .btn--secondary:hover,
.motif-2025.theme-ocean-slate .btn--secondary:hover {
  background: #2D6484 !important;
  border-color: #2D6484 !important;
}

.motif-2025[data-theme="ocean-slate"] .btn--donate,
.motif-2025.theme-ocean-slate .btn--donate {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
}

.motif-2025[data-theme="ocean-slate"] .btn--donate:hover,
.motif-2025.theme-ocean-slate .btn--donate:hover {
  background: #B91C1C !important;
  border-color: #B91C1C !important;
  color: #FFFFFF !important;
}

/* Navigation donate buttons - theme-aware red */
.motif-2025[data-theme="ocean-slate"] .nav-2025__cta.btn--donate,
.motif-2025.theme-ocean-slate .nav-2025__cta.btn--donate,
.motif-2025[data-theme="ocean-slate"] .nav-2025__mobile-cta.btn--donate,
.motif-2025.theme-ocean-slate .nav-2025__mobile-cta.btn--donate {
  background: #DC2626 !important;
  background-image: none !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
}

/* ========================================
   THEME B: WARM EARTH
   Human-centered storytelling
   Use for: stories, donation pages, community content
   ======================================== */

[data-theme="warm-earth"],
.theme-warm-earth {
  /* Primary colors */
  --primary: #2F855A;           /* Moss - sustainability green */
  --primary-hover: #216e40;
  --primary-light: color-mix(in oklab, #2F855A, white 90%);
  --primary-lighter: color-mix(in oklab, #2F855A, white 95%);
  
  /* Text colors (warm neutrals) */
  --text-primary: #292524;      /* Char - warm dark text */
  --text-secondary: #3F3A36;    /* Cocoa - warm secondary */
  --text-muted: #6B6462;        /* Warm muted text */
  
  /* Background and surface colors */
  --background: #FFFBF5;        /* Paper - warm white */
  --surface: #F5EFE7;          /* Parchment - warm surface */
  --surface-elevated: #FFFBF5;  /* Paper for elevated elements */
  
  /* Border colors */
  --border: #E9D8A6;           /* Sand - warm borders */
  --border-strong: #DCC896;
  --border-light: #F0E5B8;
  
  /* Accent colors specific to Warm Earth */
  --accent-primary: #E9D8A6;    /* Sand - accent backgrounds */
  --accent-secondary: var(--brand-orange); /* Keep orange for CTAs */
  --accent-light: #F5F0D6;
  
  /* Interactive states */
  --hover-overlay: rgba(47, 133, 90, 0.05);
  --active-overlay: rgba(47, 133, 90, 0.1);
  --focus-ring: rgba(47, 133, 90, 0.2);
  
  /* Theme gradients - Single color with tonal variation */
  --gradient-primary: linear-gradient(135deg, #2F855A 0%, #1b5e3f 100%); /* Green to darker green */
  --gradient-cta: linear-gradient(135deg, #2F855A 0%, #216e40 100%); /* Consistent green gradient */
  
  /* Solid color gradients from ways-to-give2025c */
  --gradient-moss: linear-gradient(135deg, #2F855A 0%, #216e40 100%); /* Moss green gradient */
  --gradient-orange: linear-gradient(135deg, #D85C27 0%, #c04d1f 100%); /* Orange gradient */
  --gradient-earth: linear-gradient(135deg, #8B4513 0%, #654321 100%); /* Earth brown gradient */
  
  /* Gradient color stops for component use */
  --gradient-start: #2F855A;
  --gradient-end: #1b5e3f;
  --gradient-start-5: rgba(47, 133, 90, 0.05);
  --gradient-start-10: rgba(47, 133, 90, 0.1);
  --gradient-start-20: rgba(47, 133, 90, 0.2);
  --gradient-end-5: rgba(27, 94, 63, 0.05);
  --gradient-end-10: rgba(27, 94, 63, 0.1);
  --gradient-end-20: rgba(27, 94, 63, 0.2);
  --gradient-overlay: linear-gradient(135deg, rgba(47, 133, 90, 0.7) 0%, rgba(27, 94, 63, 0.75) 100%); /* Reduced opacity for better image visibility */
  
  /* Text overlay colors for gradients */
  --gradient-text-primary: #FFFFFF;
  --gradient-text-secondary: rgba(255, 255, 255, 0.95);
  --gradient-text-muted: rgba(255, 255, 255, 0.85);
  
  /* Button overrides for this theme */
  --btn-primary-bg: var(--primary);
  --btn-primary-color: #FFFFFF;
  --btn-primary-hover-bg: var(--primary-hover);
  --btn-primary-border: var(--primary);
  --btn-secondary-bg: transparent;
  --btn-secondary-color: var(--primary);
  --btn-secondary-hover-bg: var(--primary);
  --btn-secondary-hover-color: #FFFFFF;
  --btn-secondary-border: var(--primary);
  --btn-donate-bg: #DC2626;
  --btn-donate-color: #FFFFFF;
  --btn-donate-hover-bg: #B91C1C;
  --btn-donate-border: #DC2626;
  
  /* Warm Earth: Natural storytelling colors using theme personality */
  --btn-success-bg: #22C55E; /* Universal green for success */
  --btn-success-hover-bg: #16A34A;
  --btn-warning-bg: #F59E0B; /* Universal amber for warning */
  --btn-warning-hover-bg: #D97706;
  --btn-danger-bg: #7C2D12; /* Deep brown - distinct from donate red */
  --btn-danger-hover-bg: #991B1B;
}

/* Explicit button overrides for Warm Earth with higher specificity */
.motif-2025[data-theme="warm-earth"] .btn--primary,
.motif-2025.theme-warm-earth .btn--primary {
  background: #2F855A !important;
  border-color: #2F855A !important;
}

.motif-2025[data-theme="warm-earth"] .btn--primary:hover,
.motif-2025.theme-warm-earth .btn--primary:hover {
  background: #216e40 !important;
  border-color: #216e40 !important;
}

.motif-2025[data-theme="warm-earth"] .btn--secondary,
.motif-2025.theme-warm-earth .btn--secondary {
  color: #2F855A !important;
  border-color: #2F855A !important;
}

.motif-2025[data-theme="warm-earth"] .btn--secondary:hover,
.motif-2025.theme-warm-earth .btn--secondary:hover {
  background: #2F855A !important;
  border-color: #2F855A !important;
}

.motif-2025[data-theme="warm-earth"] .btn--donate,
.motif-2025.theme-warm-earth .btn--donate {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
}

.motif-2025[data-theme="warm-earth"] .btn--donate:hover,
.motif-2025.theme-warm-earth .btn--donate:hover {
  background: #B91C1C !important;
  border-color: #B91C1C !important;
  color: #FFFFFF !important;
}

/* Navigation donate buttons - theme-aware red */
.motif-2025[data-theme="warm-earth"] .nav-2025__cta.btn--donate,
.motif-2025.theme-warm-earth .nav-2025__cta.btn--donate,
.motif-2025[data-theme="warm-earth"] .nav-2025__mobile-cta.btn--donate,
.motif-2025.theme-warm-earth .nav-2025__mobile-cta.btn--donate {
  background: #DC2626 !important;
  background-image: none !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
}

/* ========================================
   THEME C: BOLD IMPACT
   Campaign energy, high contrast
   Use for: campaigns, hero sections, social graphics
   ======================================== */

[data-theme="bold-impact"],
.theme-bold-impact {
  /* Primary colors - Use cyan for dramatic difference */
  --primary: #06B6D4;           /* Cyan - bold and energetic */
  --primary-hover: #0891B2;
  --primary-light: color-mix(in oklab, #06B6D4, white 90%);
  --primary-lighter: color-mix(in oklab, #06B6D4, white 95%);
  
  /* Text colors (crisp neutrals) */
  --text-primary: #0B1220;      /* Navy - high contrast */
  --text-secondary: #111827;    /* Graphite - secondary */
  --text-muted: #4B5563;        /* Balanced muted text */
  
  /* Background and surface colors */
  --background: #FFFFFF;        /* Pure white */
  --surface: #F8FAFC;          /* Subtle surface difference */
  --surface-elevated: #FFFFFF;  /* Consistent elevation */
  
  /* Border colors */
  --border: #E5E7EB;           /* Mist - subtle borders */
  --border-strong: #D1D5DB;
  --border-light: #F3F4F6;
  
  /* Accent colors specific to Bold Impact */
  --accent-primary: #FB7185;    /* Coral - energy/secondary actions */
  --accent-secondary: var(--brand-orange); /* Keep orange for donate buttons */
  --accent-light: #FEF2F2;
  
  /* Interactive states */
  --hover-overlay: rgba(6, 182, 212, 0.08);
  --active-overlay: rgba(6, 182, 212, 0.15);
  --focus-ring: rgba(6, 182, 212, 0.3);
  
  /* Theme gradients - Single color with tonal variation */
  --gradient-primary: linear-gradient(135deg, #06B6D4 0%, #0284a7 100%); /* Cyan to darker cyan */
  --gradient-cta: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%); /* Consistent cyan gradient */
  
  /* Gradient color stops for component use */
  --gradient-start: #06B6D4;
  --gradient-end: #0284a7;
  --gradient-start-5: rgba(6, 182, 212, 0.05);
  --gradient-start-10: rgba(6, 182, 212, 0.1);
  --gradient-start-20: rgba(6, 182, 212, 0.2);
  --gradient-end-5: rgba(2, 132, 167, 0.05);
  --gradient-end-10: rgba(2, 132, 167, 0.1);
  --gradient-end-20: rgba(2, 132, 167, 0.2);
  --gradient-accent: linear-gradient(135deg, #FB7185 0%, #e11d48 100%); /* Coral gradient for special elements */
  --gradient-overlay: linear-gradient(135deg, rgba(6, 182, 212, 0.65) 0%, rgba(2, 132, 167, 0.7) 100%); /* Reduced opacity cyan for image visibility */
  
  /* Text overlay colors for gradients */
  --gradient-text-primary: #FFFFFF;
  --gradient-text-secondary: rgba(255, 255, 255, 0.95);
  --gradient-text-muted: rgba(255, 255, 255, 0.85);
  
  /* Button overrides for this theme */
  --btn-primary-bg: var(--primary);
  --btn-primary-color: #FFFFFF;
  --btn-primary-hover-bg: var(--primary-hover);
  --btn-primary-border: var(--primary);
  --btn-secondary-bg: transparent;
  --btn-secondary-color: var(--primary);
  --btn-secondary-hover-bg: var(--primary);
  --btn-secondary-hover-color: #FFFFFF;
  --btn-secondary-border: var(--primary);
  --btn-donate-bg: #DC2626;
  --btn-donate-color: #FFFFFF;
  --btn-donate-hover-bg: #B91C1C;
  --btn-donate-border: #DC2626;
  
  /* Bold Impact: High-energy campaign colors using theme accents */
  --btn-success-bg: #22C55E; /* Universal green for success */
  --btn-success-hover-bg: #16A34A;
  --btn-warning-bg: #F59E0B; /* Universal amber for warning */
  --btn-warning-hover-bg: #D97706;
  --btn-danger-bg: #7C2D12; /* Deep brown - distinct from donate red */
  --btn-danger-hover-bg: #991B1B;
}

/* Explicit button overrides for Bold Impact with higher specificity */
.motif-2025[data-theme="bold-impact"] .btn--primary,
.motif-2025.theme-bold-impact .btn--primary {
  background: #06B6D4 !important;
  border-color: rgba(6, 182, 212, 0.3) !important; /* Much lighter border */
}

.motif-2025[data-theme="bold-impact"] .btn--primary:hover,
.motif-2025.theme-bold-impact .btn--primary:hover {
  background: #0891B2 !important;
  border-color: rgba(8, 145, 178, 0.4) !important; /* Lighter hover border */
}

.motif-2025[data-theme="bold-impact"] .btn--secondary,
.motif-2025.theme-bold-impact .btn--secondary {
  color: #06B6D4 !important;
  border-color: rgba(6, 182, 212, 0.4) !important; /* Lighter border for secondary */
}

.motif-2025[data-theme="bold-impact"] .btn--secondary:hover,
.motif-2025.theme-bold-impact .btn--secondary:hover {
  background: #06B6D4 !important;
  border-color: #06B6D4 !important; /* Full opacity on hover for definition */
}

.motif-2025[data-theme="bold-impact"] .btn--donate,
.motif-2025.theme-bold-impact .btn--donate {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
}

.motif-2025[data-theme="bold-impact"] .btn--donate:hover,
.motif-2025.theme-bold-impact .btn--donate:hover {
  background: #B91C1C !important;
  border-color: #B91C1C !important;
  color: #FFFFFF !important;
}

/* ========================================
   THEME D: FIELD & MAP
   Earth + water for data visualization
   Use for: maps, status dashboards, operational UIs
   ======================================== */

[data-theme="field-map"],
.theme-field-map {
  /* Primary colors - Use moss green for earth tones */
  --primary: #3A7D44;           /* Moss - earth/field operations */
  --primary-hover: #2F6535;
  --primary-light: color-mix(in oklab, #3A7D44, white 90%);
  --primary-lighter: color-mix(in oklab, #3A7D44, white 95%);
  
  /* Text colors (field-ready neutrals) */
  --text-primary: #1E293B;      /* Basalt - earth tone */
  --text-secondary: #334155;    /* Stone - readable secondary */
  --text-muted: #64748B;        /* Stone-lighter */
  
  /* Background and surface colors */
  --background: #F3F4F6;        /* Fog - soft background */
  --surface: #EEF2F6;          /* Cloud - card backgrounds */
  --surface-elevated: #FFFFFF;  /* Pure white for elevation */
  
  /* Border colors */
  --border: #D1D5DB;           /* Cloud-strong */
  --border-strong: #9CA3AF;
  --border-light: #F3F4F6;
  
  /* Accent colors specific to Field & Map */
  --accent-primary: #D97706;    /* Terracotta - data/warning status */
  --accent-secondary: var(--brand-blue); /* Keep blue as secondary */
  --accent-light: #FEF3C7;
  
  /* Interactive states */
  --hover-overlay: rgba(58, 125, 68, 0.06);
  --active-overlay: rgba(58, 125, 68, 0.12);
  --focus-ring: rgba(58, 125, 68, 0.25);
  
  /* Status color overrides for operational UI */
  --success: var(--primary);         /* Use moss for success */
  --warning: var(--accent-primary);  /* Use terracotta for warnings */
  
  /* Theme gradients - Single color with tonal variation */
  --gradient-primary: linear-gradient(135deg, #3A7D44 0%, #2a5f33 100%); /* Moss to darker moss */
  --gradient-cta: linear-gradient(135deg, #3A7D44 0%, #2F6535 100%); /* Consistent moss gradient */
  
  /* Gradient color stops for component use */
  --gradient-start: #3A7D44;
  --gradient-end: #2a5f33;
  --gradient-start-5: rgba(58, 125, 68, 0.05);
  --gradient-start-10: rgba(58, 125, 68, 0.1);
  --gradient-start-20: rgba(58, 125, 68, 0.2);
  --gradient-end-5: rgba(42, 95, 51, 0.05);
  --gradient-end-10: rgba(42, 95, 51, 0.1);
  --gradient-end-20: rgba(42, 95, 51, 0.2);
  --gradient-success: linear-gradient(135deg, #3A7D44 0%, #2F7D32 100%); /* Success in moss tones */
  --gradient-warning: linear-gradient(135deg, #D97706 0%, #b45309 100%); /* Terracotta warning gradient */
  --gradient-overlay: linear-gradient(135deg, rgba(58, 125, 68, 0.7) 0%, rgba(42, 95, 51, 0.75) 100%); /* Reduced opacity moss for image visibility */
  
  /* Text overlay colors for gradients */
  --gradient-text-primary: #FFFFFF;
  --gradient-text-secondary: rgba(255, 255, 255, 0.95);
  --gradient-text-muted: rgba(255, 255, 255, 0.85);
  
  /* Button overrides for this theme */
  --btn-primary-bg: var(--primary);
  --btn-primary-color: #FFFFFF;
  --btn-primary-hover-bg: var(--primary-hover);
  --btn-primary-border: var(--primary);
  --btn-secondary-bg: transparent;
  --btn-secondary-color: var(--primary);
  --btn-secondary-hover-bg: var(--primary);
  --btn-secondary-hover-color: #FFFFFF;
  --btn-secondary-border: var(--primary);
  --btn-donate-bg: #DC2626;
  --btn-donate-color: #FFFFFF;
  --btn-donate-hover-bg: #B91C1C;
  --btn-donate-border: #DC2626;
  
  /* Field & Map: Operational status colors using defined accents */
  --btn-success-bg: #22C55E; /* Universal green for success */
  --btn-success-hover-bg: #16A34A;
  --btn-warning-bg: #F59E0B; /* Universal amber for warning */
  --btn-warning-hover-bg: #D97706;
  --btn-danger-bg: #7C2D12; /* Deep brown - distinct from donate red */
  --btn-danger-hover-bg: #991B1B;
}

/* Explicit button overrides for Field & Map with higher specificity */
.motif-2025[data-theme="field-map"] .btn--primary,
.motif-2025.theme-field-map .btn--primary {
  background: #3A7D44 !important;
  border-color: #3A7D44 !important;
}

.motif-2025[data-theme="field-map"] .btn--primary:hover,
.motif-2025.theme-field-map .btn--primary:hover {
  background: #2F6535 !important;
  border-color: #2F6535 !important;
}

.motif-2025[data-theme="field-map"] .btn--secondary,
.motif-2025.theme-field-map .btn--secondary {
  color: #3A7D44 !important;
  border-color: #3A7D44 !important;
}

.motif-2025[data-theme="field-map"] .btn--secondary:hover,
.motif-2025.theme-field-map .btn--secondary:hover {
  background: #3A7D44 !important;
  border-color: #3A7D44 !important;
}

.motif-2025[data-theme="field-map"] .btn--donate,
.motif-2025.theme-field-map .btn--donate {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
}

.motif-2025[data-theme="field-map"] .btn--donate:hover,
.motif-2025.theme-field-map .btn--donate:hover {
  background: #B91C1C !important;
  border-color: #B91C1C !important;
  color: #FFFFFF !important;
}

/* ========================================
   THEME UTILITIES
   ======================================== */

/* Force theme application to child elements */
[data-theme] {
  color-scheme: light;
}

[data-theme] * {
  /* Inherit theme variables */
  box-sizing: border-box;
}

/* Theme-aware utilities moved into individual theme blocks above */

/* ========================================
   LEGACY COMPATIBILITY
   ======================================== */

/* Map old variable names to new theme system for backward compatibility */
.motif-2025 {
  /* Map legacy variables to new theme tokens */
  --twp-brand: var(--primary);
  --twp-brand-strong: var(--primary-hover);
  --twp-text: var(--text-secondary);
  --twp-muted: var(--text-muted);
  --twp-border: var(--border);
  --twp-surface: var(--surface);
  
  /* Legacy radius and shadow support */
  --twp-radius-sm: var(--radius-sm);
  --twp-radius-md: var(--radius-md);
  --twp-shadow-sm: var(--shadow-md);
}

/* ========================================
   CONTRAST VALIDATION & ACCESSIBILITY
   ======================================== */

/* Ensure all themes meet WCAG AA contrast requirements */
:root {
  /* Validated contrast ratios for accessibility */
  --contrast-min: 4.5; /* WCAG AA minimum */
  --contrast-enhanced: 7.0; /* WCAG AAA enhanced */
}

/* Force white text on all colored backgrounds for proper contrast */
.motif-2025 .cta-section,
.motif-2025 .hero-gradient,
.motif-2025 .trust-card__overlay {
  color: #FFFFFF !important;
}

.motif-2025 .cta-section *:not(.btn):not(a),
.motif-2025 .hero-gradient *:not(.btn):not(a),
.motif-2025 .trust-card__overlay *:not(.btn):not(a) {
  color: #FFFFFF !important;
}

/* Ensure icons have proper contrast on dark backgrounds */
.motif-2025 .cta-section .fa,
.motif-2025 .cta-section .icon,
.motif-2025 .hero-gradient .fa,
.motif-2025 .hero-gradient .icon,
.motif-2025 .trust-card__overlay .fa,
.motif-2025 .trust-card__overlay .icon {
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Ensure buttons on colored backgrounds use proper contrast */
.motif-2025 .cta-section .btn--white,
.motif-2025 .hero-gradient .btn--white {
  background: #FFFFFF !important;
  color: var(--primary) !important;
  border-color: #FFFFFF !important;
}

.motif-2025 .cta-section .btn--white:hover,
.motif-2025 .hero-gradient .btn--white:hover {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root,
  [data-theme] {
    /* Force high contrast colors */
    --text-primary: #000000 !important;
    --text-secondary: #000000 !important;
    --background: #FFFFFF !important;
    --surface: #FFFFFF !important;
    --border: #000000 !important;
  }
  
  .motif-2025 .cta-section {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 3px solid #FFFFFF !important;
  }
  
  .motif-2025 .btn {
    border-width: 3px !important;
  }
  
  /* Force maximum icon contrast in high contrast mode */
  .motif-2025 .impact-card:hover .impact-card__icon img {
    filter: brightness(0) invert(1) contrast(200%) !important;
  }
  
  .motif-2025 .fa,
  .motif-2025 .icon {
    text-shadow: none !important; /* Remove shadows that may reduce contrast */
  }
}

/* ========================================
   DEVELOPMENT HELPERS
   ======================================== */

/* Debug mode - shows theme boundaries */
[data-debug="true"] [data-theme] {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}

[data-debug="true"] [data-theme]::before {
  content: attr(data-theme);
  position: absolute;
  top: 0;
  left: 0;
  background: var(--primary);
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  z-index: var(--z-notification);
}