/* ==========================================================================
   THEME VARIANTS
   ========================================================================== */

/* Dark Theme (Default) */
.theme-dark {
    --primary-bg: #0a0a0f;
    --secondary-bg: #111122;
    --card-bg: rgba(25, 25, 40, 0.7);
    --text-primary: #ffffff;
    --text-secondary: #b0b0d0;
    --accent-primary: #3c6e71;
    --accent-secondary: #284b63;
    --accent-glow: rgba(60, 110, 113, 0.3);
    --border-color: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --theme-icon: "☀️";
}

/* Light Theme */
.theme-light {
    --primary-bg: #f8f9fa;
    --secondary-bg: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.8);
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a6a;
    --accent-primary: #284b63;
    --accent-secondary: #3c6e71;
    --accent-glow: rgba(40, 75, 99, 0.1);
    --border-color: rgba(0, 0, 0, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    --theme-icon: "🌙";
}

/* Midnight Theme */
.theme-midnight {
    --primary-bg: #0c0c14;
    --secondary-bg: #151522;
    --card-bg: rgba(30, 30, 46, 0.7);
    --text-primary: #e0e0ff;
    --text-secondary: #a0a0cc;
    --accent-primary: #6e71c4;
    --accent-secondary: #4b63d4;
    --accent-glow: rgba(110, 113, 196, 0.3);
    --border-color: rgba(224, 224, 255, 0.1);
    --glass-bg: rgba(224, 224, 255, 0.05);
    --glass-border: rgba(224, 224, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --theme-icon: "✨";
}

/* Emerald Theme */
.theme-emerald {
    --primary-bg: #0c140f;
    --secondary-bg: #152218;
    --card-bg: rgba(30, 46, 34, 0.7);
    --text-primary: #e0ffe0;
    --text-secondary: #a0cca0;
    --accent-primary: #3c9e71;
    --accent-secondary: #2d7d5a;
    --accent-glow: rgba(60, 158, 113, 0.3);
    --border-color: rgba(224, 255, 224, 0.1);
    --glass-bg: rgba(224, 255, 224, 0.05);
    --glass-border: rgba(224, 255, 224, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --theme-icon: "🌿";
}

/* Ruby Theme */
.theme-ruby {
    --primary-bg: #140c0c;
    --secondary-bg: #221515;
    --card-bg: rgba(46, 30, 30, 0.7);
    --text-primary: #ffe0e0;
    --text-secondary: #cca0a0;
    --accent-primary: #c43c6e;
    --accent-secondary: #a32d57;
    --accent-glow: rgba(196, 60, 110, 0.3);
    --border-color: rgba(255, 224, 224, 0.1);
    --glass-bg: rgba(255, 224, 224, 0.05);
    --glass-border: rgba(255, 224, 224, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --theme-icon: "❤️";
}

/* Sapphire Theme */
.theme-sapphire {
    --primary-bg: #0c0f14;
    --secondary-bg: #151a22;
    --card-bg: rgba(30, 36, 46, 0.7);
    --text-primary: #e0e8ff;
    --text-secondary: #a0accc;
    --accent-primary: #3c6ec4;
    --accent-secondary: #2d5aa3;
    --accent-glow: rgba(60, 110, 196, 0.3);
    --border-color: rgba(224, 232, 255, 0.1);
    --glass-bg: rgba(224, 232, 255, 0.05);
    --glass-border: rgba(224, 232, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --theme-icon: "💎";
}

/* Amber Theme */
.theme-amber {
    --primary-bg: #14100c;
    --secondary-bg: #221b15;
    --card-bg: rgba(46, 38, 30, 0.7);
    --text-primary: #fff4e0;
    --text-secondary: #ccb8a0;
    --accent-primary: #c49e3c;
    --accent-secondary: #a37d2d;
    --accent-glow: rgba(196, 158, 60, 0.3);
    --border-color: rgba(255, 244, 224, 0.1);
    --glass-bg: rgba(255, 244, 224, 0.05);
    --glass-border: rgba(255, 244, 224, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --theme-icon: "🔥";
}

/* Theme Transition */
.theme-transition {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Theme-specific Overrides */
.theme-light .hero-gradient {
    background: linear-gradient(
        135deg,
        rgba(248, 249, 250, 0.9) 0%,
        rgba(248, 249, 250, 0.7) 50%,
        transparent 100%
    );
}

.theme-light .card-gradient {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.7) 100%
    );
}

.theme-dark .text-gradient-light {
    background: linear-gradient(135deg, #ffffff 0%, #b0b0d0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-light .text-gradient-dark {
    background: linear-gradient(135deg, #1a1a2e 0%, #4a4a6a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Theme Switcher Styles */
.theme-selector {
    display: flex;
    gap: 8px;
    margin: var(--space-md) 0;
    flex-wrap: wrap;
}

.theme-option {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-normal);
}

.theme-option:hover {
    transform: scale(1.1);
}

.theme-option.active {
    border-color: var(--text-primary);
    transform: scale(1.1);
}

.theme-option[data-theme="dark"] {
    background: linear-gradient(135deg, #0a0a0f, #111122);
}

.theme-option[data-theme="light"] {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.theme-option[data-theme="midnight"] {
    background: linear-gradient(135deg, #0c0c14, #151522);
}

.theme-option[data-theme="emerald"] {
    background: linear-gradient(135deg, #0c140f, #152218);
}

.theme-option[data-theme="ruby"] {
    background: linear-gradient(135deg, #140c0c, #221515);
}

.theme-option[data-theme="sapphire"] {
    background: linear-gradient(135deg, #0c0f14, #151a22);
}

.theme-option[data-theme="amber"] {
    background: linear-gradient(135deg, #14100c, #221b15);
}

/* Theme Preview Cards */
.theme-preview-card {
    padding: var(--space-md);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
    cursor: pointer;
}

.theme-preview-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--glass-shadow);
}

.theme-preview-card.active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px var(--accent-glow);
}

.theme-preview-swatch {
    width: 100%;
    height: 60px;
    border-radius: 8px;
    margin-bottom: var(--space-sm);
}

.theme-preview-name {
    font-weight: 600;
    text-align: center;
    font-size: 0.9rem;
}

/* Theme-specific Components */
[data-theme="light"] .dark-mode-only {
    display: none !important;
}

[data-theme="dark"] .light-mode-only {
    display: none !important;
}

/* Print Mode Theme */
@media print {
    .theme-dark,
    .theme-light,
    .theme-midnight,
    .theme-emerald,
    .theme-ruby,
    .theme-sapphire,
    .theme-amber {
        --text-primary: #000000;
        --text-secondary: #333333;
        --primary-bg: #ffffff;
        --card-bg: #ffffff;
        --border-color: #cccccc;
    }
    
    .theme-selector,
    .theme-preview-card {
        display: none !important;
    }
}

/* Reduced Motion Theme */
@media (prefers-reduced-motion: reduce) {
    .theme-transition {
        transition: none;
    }
    
    .theme-option:hover {
        transform: none;
    }
    
    .theme-preview-card:hover {
        transform: none;
    }
}