/**
 * ============================================
 * iVIEW THEME SYSTEM
 * Light/Dark Theme Variables & Transitions
 * Part of the iApp Template System
 * ============================================
 *
 * Usage:
 * - Include this CSS before iview-bento.css
 * - Theme is controlled via html[data-theme="dark|light"]
 * - Auto-detects system preference if no explicit theme set
 * - Persists choice via localStorage
 *
 * Integration:
 * - ia-theme-toggle behavior manages the toggle
 * - CSS custom properties enable smooth transitions
 * ============================================
 */

/* ============================================
   1. LIGHT THEME (Default)
   ============================================ */
:root {
    /* Core Colors */
    --iv-color-bg: #ffffff;
    --iv-color-bg-alt: #fafafa;
    --iv-color-bg-elevated: #ffffff;

    /* Text Colors */
    --iv-color-text: #333333;
    --iv-color-text-light: #666666;
    --iv-color-text-lighter: #999999;
    --iv-color-text-inverse: #ffffff;

    /* Brand/Accent - Infinity Green */
    --iv-color-accent: #2d5016;
    --iv-color-accent-light: #4a7c2a;
    --iv-color-accent-lighter: #8bc34a;
    --iv-color-accent-bg: rgba(139, 195, 74, 0.1);

    /* Interactive States */
    --iv-color-hover: #f5f5f5;
    --iv-color-active: #eeeeee;
    --iv-color-focus: rgba(45, 80, 22, 0.2);

    /* Borders */
    --iv-color-border: #e0e0e0;
    --iv-color-border-light: #f0f0f0;
    --iv-color-border-accent: var(--iv-color-accent-light);

    /* Shadows */
    --iv-color-shadow: rgba(0, 0, 0, 0.08);
    --iv-color-shadow-hover: rgba(0, 0, 0, 0.12);
    --iv-color-shadow-lg: rgba(0, 0, 0, 0.16);

    /* Overlays */
    --iv-color-overlay: rgba(0, 0, 0, 0.4);
    --iv-color-overlay-heavy: rgba(0, 0, 0, 0.6);

    /* Status Colors */
    --iv-color-success: #4caf50;
    --iv-color-warning: #ff9800;
    --iv-color-error: #f44336;
    --iv-color-info: #2196f3;

    /* Gradients */
    --iv-gradient-hero: linear-gradient(135deg, var(--iv-color-bg) 0%, var(--iv-color-bg-alt) 100%);
    --iv-gradient-accent: linear-gradient(135deg, var(--iv-color-accent), var(--iv-color-accent-light));
    --iv-gradient-card: linear-gradient(180deg, var(--iv-color-bg) 0%, var(--iv-color-bg-alt) 100%);

    /* Theme Indicator (for toggle icon) */
    --iv-theme-icon: "☀️";
    --iv-theme-icon-toggle: "🌙";
}

/* ============================================
   2. DARK THEME
   ============================================ */

/* Auto-detect system dark mode preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Core Colors */
        --iv-color-bg: #0a0a0f;
        --iv-color-bg-alt: #12121a;
        --iv-color-bg-elevated: #1a1a2e;

        /* Text Colors */
        --iv-color-text: #e8efe9;
        --iv-color-text-light: #b0b8b2;
        --iv-color-text-lighter: #6b7280;
        --iv-color-text-inverse: #0a0a0f;

        /* Brand/Accent - Forest Green (organic in dark) */
        --iv-color-accent: #4a7c2a;
        --iv-color-accent-light: #6ba33e;
        --iv-color-accent-lighter: #8bc34a;
        --iv-color-accent-bg: rgba(74, 124, 42, 0.15);

        /* Interactive States */
        --iv-color-hover: #1a1a2e;
        --iv-color-active: #252540;
        --iv-color-focus: rgba(107, 163, 62, 0.3);

        /* Borders */
        --iv-color-border: rgba(255, 255, 255, 0.1);
        --iv-color-border-light: rgba(255, 255, 255, 0.05);
        --iv-color-border-accent: var(--iv-color-accent-light);

        /* Shadows */
        --iv-color-shadow: rgba(0, 0, 0, 0.3);
        --iv-color-shadow-hover: rgba(0, 0, 0, 0.5);
        --iv-color-shadow-lg: rgba(0, 0, 0, 0.6);

        /* Overlays */
        --iv-color-overlay: rgba(0, 0, 0, 0.6);
        --iv-color-overlay-heavy: rgba(0, 0, 0, 0.8);

        /* Gradients */
        --iv-gradient-hero: linear-gradient(135deg, var(--iv-color-bg) 0%, var(--iv-color-bg-alt) 100%);
        --iv-gradient-accent: linear-gradient(135deg, var(--iv-color-accent), var(--iv-color-accent-light));
        --iv-gradient-card: linear-gradient(180deg, var(--iv-color-bg-elevated) 0%, var(--iv-color-bg-alt) 100%);

        /* Theme Indicator */
        --iv-theme-icon: "🌙";
        --iv-theme-icon-toggle: "☀️";
    }
}

/* Explicit Dark Mode (overrides auto-detect) */
html[data-theme="dark"],
[data-iv-theme="dark"] {
    /* Core Colors */
    --iv-color-bg: #0a0a0f;
    --iv-color-bg-alt: #12121a;
    --iv-color-bg-elevated: #1a1a2e;

    /* Text Colors */
    --iv-color-text: #e8efe9;
    --iv-color-text-light: #b0b8b2;
    --iv-color-text-lighter: #6b7280;
    --iv-color-text-inverse: #0a0a0f;

    /* Brand/Accent - Forest Green */
    --iv-color-accent: #4a7c2a;
    --iv-color-accent-light: #6ba33e;
    --iv-color-accent-lighter: #8bc34a;
    --iv-color-accent-bg: rgba(74, 124, 42, 0.15);

    /* Interactive States */
    --iv-color-hover: #1a1a2e;
    --iv-color-active: #252540;
    --iv-color-focus: rgba(107, 163, 62, 0.3);

    /* Borders */
    --iv-color-border: rgba(255, 255, 255, 0.1);
    --iv-color-border-light: rgba(255, 255, 255, 0.05);
    --iv-color-border-accent: var(--iv-color-accent-light);

    /* Shadows */
    --iv-color-shadow: rgba(0, 0, 0, 0.3);
    --iv-color-shadow-hover: rgba(0, 0, 0, 0.5);
    --iv-color-shadow-lg: rgba(0, 0, 0, 0.6);

    /* Overlays */
    --iv-color-overlay: rgba(0, 0, 0, 0.6);
    --iv-color-overlay-heavy: rgba(0, 0, 0, 0.8);

    /* Gradients */
    --iv-gradient-hero: linear-gradient(135deg, var(--iv-color-bg) 0%, var(--iv-color-bg-alt) 100%);
    --iv-gradient-accent: linear-gradient(135deg, var(--iv-color-accent), var(--iv-color-accent-light));
    --iv-gradient-card: linear-gradient(180deg, var(--iv-color-bg-elevated) 0%, var(--iv-color-bg-alt) 100%);

    /* Theme Indicator */
    --iv-theme-icon: "🌙";
    --iv-theme-icon-toggle: "☀️";
}

/* Explicit Light Mode (overrides auto-detect) */
html[data-theme="light"],
[data-iv-theme="light"] {
    /* Core Colors */
    --iv-color-bg: #ffffff;
    --iv-color-bg-alt: #fafafa;
    --iv-color-bg-elevated: #ffffff;

    /* Text Colors */
    --iv-color-text: #333333;
    --iv-color-text-light: #666666;
    --iv-color-text-lighter: #999999;
    --iv-color-text-inverse: #ffffff;

    /* Brand/Accent */
    --iv-color-accent: #2d5016;
    --iv-color-accent-light: #4a7c2a;
    --iv-color-accent-lighter: #8bc34a;
    --iv-color-accent-bg: rgba(139, 195, 74, 0.1);

    /* Interactive States */
    --iv-color-hover: #f5f5f5;
    --iv-color-active: #eeeeee;
    --iv-color-focus: rgba(45, 80, 22, 0.2);

    /* Borders */
    --iv-color-border: #e0e0e0;
    --iv-color-border-light: #f0f0f0;
    --iv-color-border-accent: var(--iv-color-accent-light);

    /* Shadows */
    --iv-color-shadow: rgba(0, 0, 0, 0.08);
    --iv-color-shadow-hover: rgba(0, 0, 0, 0.12);
    --iv-color-shadow-lg: rgba(0, 0, 0, 0.16);

    /* Overlays */
    --iv-color-overlay: rgba(0, 0, 0, 0.4);
    --iv-color-overlay-heavy: rgba(0, 0, 0, 0.6);

    /* Gradients */
    --iv-gradient-hero: linear-gradient(135deg, var(--iv-color-bg) 0%, var(--iv-color-bg-alt) 100%);
    --iv-gradient-accent: linear-gradient(135deg, var(--iv-color-accent), var(--iv-color-accent-light));
    --iv-gradient-card: linear-gradient(180deg, var(--iv-color-bg) 0%, var(--iv-color-bg-alt) 100%);

    /* Theme Indicator */
    --iv-theme-icon: "☀️";
    --iv-theme-icon-toggle: "🌙";
}

/* ============================================
   3. SMOOTH THEME TRANSITIONS
   ============================================ */

/* Enable smooth color transitions on theme change */
html.iv-theme-transitioning,
html.iv-theme-transitioning *,
html.iv-theme-transitioning *::before,
html.iv-theme-transitioning *::after {
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease !important;
}

/* ============================================
   4. THEME TOGGLE COMPONENT
   ============================================ */

.iv-theme-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 8px;
    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--iv-color-text);
}

.iv-theme-toggle:hover {
    background-color: var(--iv-color-hover);
    transform: scale(1.1);
}

.iv-theme-toggle:focus {
    outline: 2px solid var(--iv-color-accent);
    outline-offset: 2px;
}

.iv-theme-toggle:active {
    transform: scale(0.95);
}

/* Theme icon display - using explicit icon elements
   Show the OPPOSITE icon (what you'll get when you click):
   - Light mode: show moon (click for dark)
   - Dark mode: show sun (click for light)
*/
.iv-theme-toggle .iv-icon-sun,
.iv-theme-toggle .iv-icon-moon {
    display: none;
}

/* Light mode: show moon icon (click to switch to dark) */
html:not([data-theme="dark"]) .iv-theme-toggle .iv-icon-moon,
html[data-theme="light"] .iv-theme-toggle .iv-icon-moon {
    display: block;
}

/* Dark mode: show sun icon (click to switch to light) */
html[data-theme="dark"] .iv-theme-toggle .iv-icon-sun {
    display: block;
}

/* ============================================
   5. CONTENT THEME VARIATIONS
   ============================================ */

/* Individual content themes (for blog posts, etc.) */
[data-iv-content-theme="garden-green"] {
    --iv-color-accent: #2d5016;
    --iv-color-accent-light: #4a7c2a;
    --iv-color-accent-lighter: #6ba33e;
    --iv-gradient-accent: linear-gradient(135deg, #2d5016, #4a7c2a);
}

[data-iv-content-theme="ocean-blue"] {
    --iv-color-accent: #1565c0;
    --iv-color-accent-light: #1e88e5;
    --iv-color-accent-lighter: #42a5f5;
    --iv-gradient-accent: linear-gradient(135deg, #1565c0, #1e88e5);
}

[data-iv-content-theme="sunset-orange"] {
    --iv-color-accent: #e65100;
    --iv-color-accent-light: #ef6c00;
    --iv-color-accent-lighter: #ff9800;
    --iv-gradient-accent: linear-gradient(135deg, #e65100, #ef6c00);
}

[data-iv-content-theme="twilight-purple"] {
    --iv-color-accent: #6a1b9a;
    --iv-color-accent-light: #8e24aa;
    --iv-color-accent-lighter: #ab47bc;
    --iv-gradient-accent: linear-gradient(135deg, #6a1b9a, #8e24aa);
}

[data-iv-content-theme="earth-brown"] {
    --iv-color-accent: #5d4037;
    --iv-color-accent-light: #795548;
    --iv-color-accent-lighter: #8d6e63;
    --iv-gradient-accent: linear-gradient(135deg, #5d4037, #795548);
}

/* ============================================
   6. ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --iv-color-border: #000000;
        --iv-color-text: #000000;
        --iv-color-text-light: #333333;
    }

    html[data-theme="dark"] {
        --iv-color-border: #ffffff;
        --iv-color-text: #ffffff;
        --iv-color-text-light: #e0e0e0;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    html.iv-theme-transitioning,
    html.iv-theme-transitioning *,
    html.iv-theme-transitioning *::before,
    html.iv-theme-transitioning *::after {
        transition: none !important;
    }
}

/* ============================================
   7. PRINT STYLES
   ============================================ */

@media print {
    :root {
        --iv-color-bg: #ffffff !important;
        --iv-color-text: #000000 !important;
        --iv-color-text-light: #333333 !important;
        --iv-color-accent: #2d5016 !important;
        --iv-color-border: #cccccc !important;
    }

    .iv-theme-toggle {
        display: none !important;
    }
}