/**
 * ChatFly Theme System
 * Version: 1.0.0
 * Date: January 28, 2026
 *
 * Features:
 * - 4 distinct themes (2 standard, 2 colorblind-friendly)
 * - WCAG AA compliant contrast ratios
 * - Colorblind-safe palettes (no red/green only distinctions)
 * - Smooth theme transitions
 * - Persistent theme storage
 */

/* ============================================
   THEME 1: MIDNIGHT (Dark Mode - Default)
   ============================================ */

[data-theme="midnight"], :root {
    /* Backgrounds */
    --bg-dark: #0a0a0f;
    --bg-card: #111118;
    --bg-elevated: #16161f;
    --bg-hover: #1e1e2a;

    /* Hot Pink Accent */
    --pink: #ff006e;
    --pink-light: #ff3d8f;
    --pink-dark: #cc0058;
    --pink-glow: rgba(255, 0, 110, 0.4);
    --pink-subtle: rgba(255, 0, 110, 0.1);

    /* Secondary Colors */
    --cyan: #00f5ff;
    --cyan-glow: rgba(0, 245, 255, 0.3);
    --green: #00ff88;
    --yellow: #ffea00;
    --purple: #bf00ff;

    /* Text */
    --text: #ffffff;
    --text-secondary: #a0a0b0;
    --text-muted: #606070;

    /* Borders */
    --border: rgba(255, 255, 255, 0.08);
    --border-pink: rgba(255, 0, 110, 0.3);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-pink: 0 0 30px var(--pink-glow);
    --shadow-cyan: 0 0 20px var(--cyan-glow);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-med: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* ============================================
   THEME 2: DAYLIGHT (Light Mode)
   ============================================ */

[data-theme="daylight"] {
    /* Backgrounds */
    --bg-dark: #ffffff;
    --bg-card: #f8f9fa;
    --bg-elevated: #f1f3f5;
    --bg-hover: #e9ecef;

    /* Hot Pink Accent (same as dark for brand consistency) */
    --pink: #ff006e;
    --pink-light: #ff3d8f;
    --pink-dark: #cc0058;
    --pink-glow: rgba(255, 0, 110, 0.2);
    --pink-subtle: rgba(255, 0, 110, 0.05);

    /* Secondary Colors - Adjusted for light mode */
    --cyan: #0891b2;
    --cyan-glow: rgba(8, 145, 178, 0.2);
    --green: #059669;
    --yellow: #d97706;
    --purple: #9333ea;

    /* Text */
    --text: #111827;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;

    /* Borders */
    --border: rgba(0, 0, 0, 0.08);
    --border-pink: rgba(255, 0, 110, 0.25);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-pink: 0 0 20px rgba(255, 0, 110, 0.2);
    --shadow-cyan: 0 0 15px rgba(8, 145, 178, 0.2);

    /* Transitions (same) */
    --transition-fast: 0.15s ease;
    --transition-med: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* ============================================
   THEME 3: SUNSET (Colorblind-Friendly Dark)
   Designed for: Protanopia, Deuteranopia
   Uses: Amber/Orange + Cyan (high contrast, no red/green)
   ============================================ */

[data-theme="sunset"] {
    /* Backgrounds */
    --bg-dark: #1a1a1a;
    --bg-card: #232323;
    --bg-elevated: #2d2d2d;
    --bg-hover: #373737;

    /* Primary: Amber/Orange (distinguishable from cyan) */
    --pink: #f59e0b;
    --pink-light: #fbbf24;
    --pink-dark: #d97706;
    --pink-glow: rgba(245, 158, 11, 0.4);
    --pink-subtle: rgba(245, 158, 11, 0.1);

    /* Accent: Cyan (high contrast with amber) */
    --cyan: #06b6d4;
    --cyan-glow: rgba(6, 182, 212, 0.3);

    /* Success/Positive: Blue (safe for all colorblind types) */
    --green: #3b82f6;

    /* Warning: Yellow-Orange */
    --yellow: #fbbf24;

    /* Error/Negative: Dark Blue (distinguishable) */
    --purple: #1e40af;

    /* Text */
    --text: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;

    /* Borders */
    --border: rgba(255, 255, 255, 0.1);
    --border-pink: rgba(245, 158, 11, 0.3);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-pink: 0 0 30px rgba(245, 158, 11, 0.4);
    --shadow-cyan: 0 0 20px rgba(6, 182, 212, 0.3);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-med: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* ============================================
   THEME 4: OCEAN (Colorblind-Friendly Light)
   Designed for: All colorblind types
   Uses: Blue + Orange-Red (maximum contrast)
   ============================================ */

[data-theme="ocean"] {
    /* Backgrounds */
    --bg-dark: #f0f9ff;
    --bg-card: #e0f2fe;
    --bg-elevated: #bae6fd;
    --bg-hover: #7dd3fc;

    /* Primary: Deep Blue */
    --pink: #0369a1;
    --pink-light: #0284c7;
    --pink-dark: #075985;
    --pink-glow: rgba(3, 105, 161, 0.2);
    --pink-subtle: rgba(3, 105, 161, 0.05);

    /* Accent: Orange-Red (high contrast with blue) */
    --cyan: #ea580c;
    --cyan-glow: rgba(234, 88, 12, 0.2);

    /* Success/Positive: Dark Blue */
    --green: #1e40af;

    /* Warning: Amber */
    --yellow: #d97706;

    /* Error/Negative: Deep Orange */
    --purple: #c2410c;

    /* Text */
    --text: #0c4a6e;
    --text-secondary: #475569;
    --text-muted: #64748b;

    /* Borders */
    --border: rgba(3, 105, 161, 0.12);
    --border-pink: rgba(3, 105, 161, 0.3);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-pink: 0 0 20px rgba(3, 105, 161, 0.15);
    --shadow-cyan: 0 0 15px rgba(234, 88, 12, 0.15);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-med: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* ============================================
   THEME TRANSITION ANIMATIONS
   ============================================ */

/* Smooth theme transitions */
body,
.header,
.sidebar,
.chat-area,
.modal,
.btn,
.card,
.message-content {
    transition:
        background-color var(--transition-med),
        color var(--transition-med),
        border-color var(--transition-med),
        box-shadow var(--transition-med);
}

/* Prevent FOUC (Flash of Unstyled Content) on theme load */
html:not([data-theme]) {
    visibility: hidden;
}

html[data-theme] {
    visibility: visible;
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    [data-theme="midnight"],
    [data-theme="sunset"] {
        --border: rgba(255, 255, 255, 0.2);
        --text-secondary: #e5e5e5;
    }

    [data-theme="daylight"],
    [data-theme="ocean"] {
        --border: rgba(0, 0, 0, 0.2);
        --text-secondary: #1f1f1f;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    body,
    .header,
    .sidebar,
    .chat-area,
    .modal,
    .btn,
    .card,
    .message-content {
        transition: none !important;
        animation: none !important;
    }
}

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

/* Theme indicator badge (for settings UI) */
.theme-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.theme-badge-midnight {
    background: rgba(255, 0, 110, 0.1);
    color: #ff006e;
    border: 1px solid rgba(255, 0, 110, 0.3);
}

.theme-badge-daylight {
    background: rgba(255, 0, 110, 0.05);
    color: #ff006e;
    border: 1px solid rgba(255, 0, 110, 0.2);
}

.theme-badge-sunset {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.theme-badge-ocean {
    background: rgba(3, 105, 161, 0.1);
    color: #0369a1;
    border: 1px solid rgba(3, 105, 161, 0.3);
}

/* Colorblind mode indicator icon */
.colorblind-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.colorblind-icon svg {
    fill: currentColor;
}