/**
 * Theme System for activAmed Website
 * 8 theme variants: Light/Dark × Standard/High Contrast/Protanopia-Deuteranopia/Tritanopia
 * WCAG AAA compliant color combinations
 */

/* ==========================================
   BRAND COLORS (Base Palette)
   ========================================== */

:root {
  /* Brand colors extracted from business card and logo */
  --brand-navy: #1B2947;
  --brand-parchment: #E8DCC8;
  --brand-blue: #3B5998;
  --brand-cream: #F5F3EF;
  --brand-text-dark: #2C2C2C;
  --brand-gold: #C9A961;

  /* Focus indicator color (high contrast blue) */
  --focus-color: #0066CC;
}

/* ==========================================
   THEME 1: HELL (STANDARD) - Default Light
   ========================================== */

:root,
[data-theme="light-standard"] {
  --color-primary: #1B2947;
  --color-primary-hover: #2A3A5C;
  --color-secondary: #3B5998;
  --color-accent: #C9A961;

  --color-background: #FFFFFF;
  --color-background-alt: #F5F3EF;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FAFAFA;

  --color-text: #2C2C2C;
  --color-text-muted: #5A5A5A;
  --color-heading: #1B2947;

  --color-link: #3B5998;
  --color-link-hover: #2A4070;

  --color-border: #D4D4D4;
  --color-border-light: #E8E8E8;

  --color-success: #0F7A3D;
  --color-warning: #B45309;
  --color-error: #B91C1C;
  --color-info: #1E40AF;

  --color-focus: #0066CC;
  --color-table-header: #F5F3EF;

  /* Button colors */
  --color-button-primary-bg: #1B2947;
  --color-button-primary-text: #FFFFFF;
  --color-button-primary-hover: #2A3A5C;

  --color-button-secondary-bg: #3B5998;
  --color-button-secondary-text: #FFFFFF;
  --color-button-secondary-hover: #2A4070;

  /* Footer and nav backgrounds (defaults to primary) */
  --color-footer-bg: var(--color-primary);
  --color-nav-active-bg: var(--color-primary);
  --color-nav-active-text: white;
  --color-back-to-top-text: white;
  --color-button-outline-hover-text: var(--color-button-primary-text);

  /* Header colors */
  --color-header-bg: #7a8b9c;
  --color-header-text: #000000;
  --color-header-text-muted: #1a1a1a;
  --color-header-icon: #000000;

  /* Hero gradient colors */
  --hero-gradient-start: rgba(27, 41, 71, 0.85);
  --hero-gradient-end: rgba(59, 89, 152, 0.75);

  /* Hero text color */
  --hero-text-color: #FFFFFF;

  /* CTA section colors */
  --color-cta-text: #FFFFFF;
  --color-cta-btn-bg: #FFFFFF;
  --color-cta-btn-text: var(--color-primary);
  --color-cta-outline-hover-bg: var(--color-primary);
  --color-badge-primary-text: #FFFFFF;
}

/* ==========================================
   THEME 2: HELL (HOHER KONTRAST) - Light High Contrast
   ========================================== */

[data-theme="light-high-contrast"] {
  --color-primary: #000000;
  --color-primary-hover: #1A1A1A;
  --color-secondary: #003D82;
  --color-accent: #8B6914;

  --color-background: #FFFFFF;
  --color-background-alt: #F0F0F0;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FAFAFA;

  --color-text: #000000;
  --color-text-muted: #404040;
  --color-heading: #000000;

  --color-link: #003D82;
  --color-link-hover: #001F41;

  --color-border: #000000;
  --color-border-light: #E8E8E8;

  --color-success: #0A5028;
  --color-warning: #7A3805;
  --color-error: #7F1D1D;
  --color-info: #1E3A8A;

  --color-focus: #0066CC;
  --color-table-header: #E0E0E0;

  --color-button-primary-bg: #000000;
  --color-button-primary-text: #FFFFFF;
  --color-button-primary-hover: #1A1A1A;

  --color-button-secondary-bg: #003D82;
  --color-button-secondary-text: #FFFFFF;
  --color-button-secondary-hover: #001F41;

  /* Header colors */
  --color-header-bg: #7a8b9c;
  --color-header-text: #000000;
  --color-header-text-muted: #000000;
  --color-header-icon: #000000;

  /* Hero gradient colors */
  --hero-gradient-start: rgba(0, 0, 0, 0.85);
  --hero-gradient-end: rgba(0, 61, 130, 0.75);

  /* Hero text color */
  --hero-text-color: #FFFFFF;

  /* CTA section colors */
  --color-cta-text: #FFFFFF;
  --color-cta-btn-bg: #FFFFFF;
  --color-cta-btn-text: var(--color-primary);
  --color-cta-outline-hover-bg: var(--color-primary);
  --color-badge-primary-text: #FFFFFF;
}

/* ==========================================
   THEME 3: HELL (PROTANOPIE & DEUTERANOPIE) - Light Red-Green Colorblind
   ========================================== */

[data-theme="light-protanopia"] {
  --color-primary: #1B2947;
  --color-primary-hover: #2A3A5C;
  --color-secondary: #0369A1; /* Blue instead of purple-blue */
  --color-accent: #92400E; /* Brown instead of gold */

  --color-background: #FFFFFF;
  --color-background-alt: #F5F3EF;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FAFAFA;

  --color-text: #2C2C2C;
  --color-text-muted: #5A5A5A;
  --color-heading: #1B2947;

  --color-link: #0369A1;
  --color-link-hover: #075985;

  --color-border: #D4D4D4;
  --color-border-light: #E8E8E8;

  --color-success: #0C4A6E; /* Blue instead of green */
  --color-warning: #92400E; /* Brown for warnings */
  --color-error: #3F3F46; /* Gray instead of red */
  --color-info: #0369A1;

  --color-focus: #0284C7;
  --color-table-header: #F5F3EF;

  --color-button-primary-bg: #1B2947;
  --color-button-primary-text: #FFFFFF;
  --color-button-primary-hover: #2A3A5C;

  --color-button-secondary-bg: #0369A1;
  --color-button-secondary-text: #FFFFFF;
  --color-button-secondary-hover: #075985;

  /* Header colors */
  --color-header-bg: #7a8b9c;
  --color-header-text: #000000;
  --color-header-text-muted: #1a1a1a;
  --color-header-icon: #000000;

  /* Hero gradient colors - Blues safe for protanopia/deuteranopia */
  --hero-gradient-start: rgba(27, 41, 71, 0.85);
  --hero-gradient-end: rgba(3, 105, 161, 0.75);

  /* Hero text color */
  --hero-text-color: #FFFFFF;

  /* CTA section colors */
  --color-cta-text: #FFFFFF;
  --color-cta-btn-bg: #FFFFFF;
  --color-cta-btn-text: var(--color-primary);
  --color-cta-outline-hover-bg: var(--color-primary);
  --color-badge-primary-text: #FFFFFF;
}

/* ==========================================
   THEME 4: HELL (TRITANOPIE) - Light Blue-Yellow Colorblind
   ========================================== */

[data-theme="light-tritanopia"] {
  --color-primary: #7C2D12; /* Red-brown instead of navy */
  --color-primary-hover: #991B1B;
  --color-secondary: #BE123C; /* Pink-red instead of blue */
  --color-accent: #F59E0B; /* Bright amber instead of gray for better contrast */

  --color-background: #FFFFFF;
  --color-background-alt: #F5F3EF;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FAFAFA;

  --color-text: #2C2C2C;
  --color-text-muted: #5A5A5A;
  --color-heading: #7C2D12;

  --color-link: #BE123C;
  --color-link-hover: #9F1239;

  --color-border: #D4D4D4;
  --color-border-light: #E8E8E8;

  --color-success: #374151; /* Gray for success */
  --color-warning: #991B1B; /* Red for warnings */
  --color-error: #7C2D12; /* Brown-red for errors */
  --color-info: #BE123C;

  --color-focus: #DC2626;
  --color-table-header: #F5F3EF;

  --color-button-primary-bg: #7C2D12;
  --color-button-primary-text: #FFFFFF;
  --color-button-primary-hover: #991B1B;

  --color-button-secondary-bg: #BE123C;
  --color-button-secondary-text: #FFFFFF;
  --color-button-secondary-hover: #9F1239;

  /* Header colors */
  --color-header-bg: #7a8b9c;
  --color-header-text: #000000;
  --color-header-text-muted: #1a1a1a;
  --color-header-icon: #000000;

  /* Hero gradient colors - Reds/pinks for tritanopia (blues appear gray) */
  --hero-gradient-start: rgba(124, 45, 18, 0.85);
  --hero-gradient-end: rgba(190, 18, 60, 0.75);

  /* Hero text color */
  --hero-text-color: #FFFFFF;

  /* CTA section colors */
  --color-cta-text: #FFFFFF;
  --color-cta-btn-bg: #FFFFFF;
  --color-cta-btn-text: var(--color-primary);
  --color-cta-outline-hover-bg: var(--color-primary);
  --color-badge-primary-text: #FFFFFF;
}

/* ==========================================
   THEME 5: DUNKEL (STANDARD) - Default Dark
   ========================================== */

[data-theme="dark-standard"] {
  --color-primary: #5B7BB4;
  --color-primary-hover: #7693C4;
  --color-secondary: #6B8EC9;
  --color-accent: #D4B87A;

  --color-background: #1A1A1A;
  --color-background-alt: #242424;
  --color-surface: #2C2C2C;
  --color-surface-raised: #333333;

  --color-text: #E8E8E8;
  --color-text-muted: #A3A3A3;
  --color-heading: #F5F5F5;

  --color-link: #7693C4;
  --color-link-hover: #91AAD4;

  --color-border: #404040;
  --color-border-light: #333333;

  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  --color-focus: #60A5FA;
  --color-table-header: #333333;

  --color-button-primary-bg: #5B7BB4;
  --color-button-primary-text: #FFFFFF;
  --color-button-primary-hover: #7693C4;

  --color-button-secondary-bg: #6B8EC9;
  --color-button-secondary-text: #FFFFFF;
  --color-button-secondary-hover: #7FA3D4;

  /* Header colors */
  --color-header-bg: #7a8b9c;
  --color-header-text: #FFFFFF;
  --color-header-text-muted: #E8E8E8;
  --color-header-icon: #FFFFFF;

  /* Hero gradient colors */
  --hero-gradient-start: rgba(91, 123, 180, 0.85);
  --hero-gradient-end: rgba(107, 142, 201, 0.75);

  /* Hero text color */
  --hero-text-color: #FFFFFF;

  /* CTA section colors */
  --color-cta-text: #FFFFFF;
  --color-cta-btn-bg: #FFFFFF;
  --color-cta-btn-text: var(--color-primary);
  --color-cta-outline-hover-bg: var(--color-primary);
  --color-badge-primary-text: #FFFFFF;
}

/* ==========================================
   THEME 6: DUNKEL (HOHER KONTRAST) - Dark High Contrast
   ========================================== */

[data-theme="dark-high-contrast"] {
  --color-primary: #FFFFFF;
  --color-primary-hover: #E8E8E8;
  --color-secondary: #60A5FA;
  --color-accent: #FCD34D;

  --color-background: #000000;
  --color-background-alt: #0A0A0A;
  --color-surface: #1A1A1A;
  --color-surface-raised: #262626;

  --color-text: #FFFFFF;
  --color-text-muted: #D4D4D4;
  --color-heading: #FFFFFF;

  --color-link: #60A5FA;
  --color-link-hover: #93C5FD;

  --color-border: #FFFFFF;
  --color-border-light: #333333;

  --color-success: #4ADE80;
  --color-warning: #FBBF24;
  --color-error: #F87171;
  --color-info: #60A5FA;

  --color-focus: #93C5FD;
  --color-table-header: #262626;

  --color-button-primary-bg: #FFFFFF;
  --color-button-primary-text: #000000;
  --color-button-primary-hover: #E8E8E8;

  --color-button-secondary-bg: #60A5FA;
  --color-button-secondary-text: #000000;
  --color-button-secondary-hover: #93C5FD;

  /* Special overrides for footer and nav */
  --color-footer-bg: #000000;
  --color-nav-active-bg: #FFFFFF;
  --color-nav-active-text: #000000;
  --color-back-to-top-text: #000000;
  --color-button-outline-hover-text: #000000;

  /* Header colors */
  --color-header-bg: #7a8b9c;
  --color-header-text: #FFFFFF;
  --color-header-text-muted: #FFFFFF;
  --color-header-icon: #FFFFFF;

  /* Hero gradient colors - High contrast white to blue */
  --hero-gradient-start: rgba(255, 255, 255, 0.85);
  --hero-gradient-end: rgba(96, 165, 250, 0.75);

  /* Hero text color - BLACK for high contrast against white gradient */
  --hero-text-color: #000000;

  /* CTA section colors */
  --color-cta-text: #FFFFFF;
  --color-cta-btn-bg: #FFFFFF;
  --color-cta-btn-text: #000000;
  --color-cta-outline-hover-bg: #000000;
  --color-badge-primary-text: #000000;
}

/* ==========================================
   THEME 7: DUNKEL (PROTANOPIE & DEUTERANOPIE) - Dark Red-Green Colorblind
   ========================================== */

[data-theme="dark-protanopia"] {
  --color-primary: #60A5FA;
  --color-primary-hover: #93C5FD;
  --color-secondary: #0EA5E9;
  --color-accent: #A16207;

  --color-background: #1A1A1A;
  --color-background-alt: #242424;
  --color-surface: #2C2C2C;
  --color-surface-raised: #333333;

  --color-text: #E8E8E8;
  --color-text-muted: #A3A3A3;
  --color-heading: #F5F5F5;

  --color-link: #60A5FA;
  --color-link-hover: #93C5FD;

  --color-border: #404040;
  --color-border-light: #333333;

  --color-success: #0EA5E9; /* Blue instead of green */
  --color-warning: #A16207; /* Brown for warnings */
  --color-error: #A1A1AA; /* Gray instead of red */
  --color-info: #60A5FA;

  --color-focus: #93C5FD;
  --color-table-header: #333333;

  --color-button-primary-bg: #60A5FA;
  --color-button-primary-text: #000000;
  --color-button-primary-hover: #93C5FD;

  --color-button-secondary-bg: #0EA5E9;
  --color-button-secondary-text: #FFFFFF;
  --color-button-secondary-hover: #38BDF8;

  /* Header colors */
  --color-header-bg: #7a8b9c;
  --color-header-text: #FFFFFF;
  --color-header-text-muted: #E8E8E8;
  --color-header-icon: #FFFFFF;

  /* Hero gradient colors - Blues for protanopia/deuteranopia */
  --hero-gradient-start: rgba(96, 165, 250, 0.85);
  --hero-gradient-end: rgba(14, 165, 233, 0.75);

  /* Hero text color */
  --hero-text-color: #FFFFFF;

  /* CTA section colors */
  --color-cta-text: #FFFFFF;
  --color-cta-btn-bg: #FFFFFF;
  --color-cta-btn-text: var(--color-primary);
  --color-cta-outline-hover-bg: var(--color-primary);
  --color-badge-primary-text: #FFFFFF;
}

/* ==========================================
   THEME 8: DUNKEL (TRITANOPIE) - Dark Blue-Yellow Colorblind
   ========================================== */

[data-theme="dark-tritanopia"] {
  --color-primary: #FB7185;
  --color-primary-hover: #FDA4AF;
  --color-secondary: #F43F5E;
  --color-accent: #FCD34D; /* Bright yellow instead of gray for better contrast */

  --color-background: #1A1A1A;
  --color-background-alt: #242424;
  --color-surface: #2C2C2C;
  --color-surface-raised: #333333;

  --color-text: #E8E8E8;
  --color-text-muted: #A3A3A3;
  --color-heading: #F5F5F5;

  --color-link: #FB7185;
  --color-link-hover: #FDA4AF;

  --color-border: #404040;
  --color-border-light: #333333;

  --color-success: #9CA3AF; /* Gray for success */
  --color-warning: #EF4444; /* Red for warnings */
  --color-error: #DC2626; /* Darker red for errors */
  --color-info: #F43F5E;

  --color-focus: #FDA4AF;
  --color-table-header: #333333;

  --color-button-primary-bg: #FB7185;
  --color-button-primary-text: #FFFFFF;
  --color-button-primary-hover: #FDA4AF;

  --color-button-secondary-bg: #F43F5E;
  --color-button-secondary-text: #FFFFFF;
  --color-button-secondary-hover: #FB7185;

  /* Header colors */
  --color-header-bg: #7a8b9c;
  --color-header-text: #FFFFFF;
  --color-header-text-muted: #E8E8E8;
  --color-header-icon: #FFFFFF;

  /* Hero gradient colors - Pinks/reds for tritanopia (blues appear gray) */
  --hero-gradient-start: rgba(251, 113, 133, 0.85);
  --hero-gradient-end: rgba(244, 63, 94, 0.75);

  /* Hero text color */
  --hero-text-color: #FFFFFF;

  /* CTA section colors */
  --color-cta-text: #FFFFFF;
  --color-cta-btn-bg: #FFFFFF;
  --color-cta-btn-text: var(--color-primary);
  --color-cta-outline-hover-bg: var(--color-primary);
  --color-badge-primary-text: #FFFFFF;
}

/* ==========================================
   AUTOMATIC DARK MODE (System Preference)
   ========================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-primary: #5B7BB4;
    --color-primary-hover: #7693C4;
    --color-secondary: #6B8EC9;
    --color-accent: #D4B87A;

    --color-background: #1A1A1A;
    --color-background-alt: #242424;
    --color-surface: #2C2C2C;
    --color-surface-raised: #333333;

    --color-text: #E8E8E8;
    --color-text-muted: #A3A3A3;
    --color-heading: #F5F5F5;

    --color-link: #7693C4;
    --color-link-hover: #91AAD4;

    --color-border: #404040;
    --color-border-light: #333333;

    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;

    --color-focus: #60A5FA;
    --color-table-header: #333333;

    --color-button-primary-bg: #5B7BB4;
    --color-button-primary-text: #FFFFFF;
    --color-button-primary-hover: #7693C4;

    --color-button-secondary-bg: #6B8EC9;
    --color-button-secondary-text: #FFFFFF;
    --color-button-secondary-hover: #7FA3D4;

    /* CTA section colors */
    --color-cta-text: #FFFFFF;
    --color-cta-btn-bg: #FFFFFF;
    --color-cta-btn-text: var(--color-primary);
    --color-cta-outline-hover-bg: var(--color-primary);
    --color-badge-primary-text: #FFFFFF;
  }
}

/* ==========================================
   REDUCED MOTION PREFERENCE
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}