/**
 * Tools Horizon Pro - Theme Variations
 * CSS custom properties for easy theme customization
 * @version 3.0.0
 */

/* ==========================================================================
   DEFAULT THEME
   ========================================================================== */

.th-theme-default,
.th-wrap {
    --th-primary: #667eea;
    --th-primary-dark: #5a6fd6;
    --th-primary-light: rgba(102, 126, 234, 0.1);
    --th-secondary: #764ba2;
    --th-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --th-gradient-hover: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
    
    --th-success: #10b981;
    --th-success-light: #d1fae5;
    --th-danger: #ef4444;
    --th-danger-light: #fee2e2;
    --th-warning: #f59e0b;
    --th-warning-light: #fef3c7;
    --th-info: #3b82f6;
    --th-info-light: #dbeafe;
    
    --th-text: #1f2937;
    --th-text-light: #374151;
    --th-text-muted: #6b7280;
    --th-text-lighter: #9ca3af;
    
    --th-bg: #ffffff;
    --th-bg-alt: #f9fafb;
    --th-bg-muted: #f3f4f6;
    
    --th-border: #e5e7eb;
    --th-border-dark: #d1d5db;
    
    --th-radius: 8px;
    --th-radius-sm: 4px;
    --th-radius-lg: 12px;
    --th-radius-xl: 16px;
    --th-radius-full: 9999px;
    
    --th-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --th-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --th-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --th-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --th-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    --th-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */

.th-theme-dark {
    --th-primary: #818cf8;
    --th-primary-dark: #6366f1;
    --th-primary-light: rgba(129, 140, 248, 0.15);
    --th-secondary: #a78bfa;
    --th-gradient: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
    --th-gradient-hover: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    
    --th-success: #34d399;
    --th-success-light: rgba(52, 211, 153, 0.15);
    --th-danger: #f87171;
    --th-danger-light: rgba(248, 113, 113, 0.15);
    --th-warning: #fbbf24;
    --th-warning-light: rgba(251, 191, 36, 0.15);
    --th-info: #60a5fa;
    --th-info-light: rgba(96, 165, 250, 0.15);
    
    --th-text: #f9fafb;
    --th-text-light: #e5e7eb;
    --th-text-muted: #9ca3af;
    --th-text-lighter: #6b7280;
    
    --th-bg: #111827;
    --th-bg-alt: #1f2937;
    --th-bg-muted: #374151;
    
    --th-border: #374151;
    --th-border-dark: #4b5563;
    
    --th-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --th-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --th-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --th-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --th-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

.th-theme-dark .th-tool-card,
.th-theme-dark .th-category-card,
.th-theme-dark .th-tool-wrapper {
    background: var(--th-bg-alt);
}

.th-theme-dark .th-input,
.th-theme-dark .th-select,
.th-theme-dark .th-textarea {
    background: var(--th-bg);
    border-color: var(--th-border);
    color: var(--th-text);
}

.th-theme-dark .th-btn-secondary {
    background: var(--th-bg-muted);
    color: var(--th-text);
    border-color: var(--th-border);
}

.th-theme-dark .th-btn-secondary:hover {
    background: var(--th-border);
}

.th-theme-dark .th-result-box {
    background: var(--th-bg-alt);
    border-color: var(--th-border);
}

.th-theme-dark .th-modal {
    background: var(--th-bg-alt);
}

.th-theme-dark .th-toast {
    background: var(--th-bg-alt);
}

.th-theme-dark .th-accordion-header:hover {
    background: var(--th-bg-muted);
}

.th-theme-dark .th-filter-bar {
    background: var(--th-bg-alt);
}

.th-theme-dark .th-search-input {
    background: var(--th-bg-alt);
    border-color: var(--th-border);
    color: var(--th-text);
}

.th-theme-dark .th-search-suggestions {
    background: var(--th-bg-alt);
}

.th-theme-dark .th-search-suggestion:hover {
    background: var(--th-bg-muted);
}

/* ==========================================================================
   MINIMAL THEME
   ========================================================================== */

.th-theme-minimal {
    --th-primary: #0f172a;
    --th-primary-dark: #020617;
    --th-primary-light: rgba(15, 23, 42, 0.08);
    --th-secondary: #334155;
    --th-gradient: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    --th-gradient-hover: linear-gradient(135deg, #020617 0%, #1e293b 100%);
    
    --th-radius: 4px;
    --th-radius-sm: 2px;
    --th-radius-lg: 6px;
    --th-radius-xl: 8px;
    
    --th-shadow-sm: none;
    --th-shadow: 0 0 0 1px var(--th-border);
    --th-shadow-md: 0 0 0 1px var(--th-border);
    --th-shadow-lg: 0 0 0 1px var(--th-border);
    --th-shadow-xl: 0 0 0 1px var(--th-border);
}

.th-theme-minimal .th-tool-card,
.th-theme-minimal .th-category-card {
    border: 1px solid var(--th-border);
    box-shadow: none;
}

.th-theme-minimal .th-tool-card:hover,
.th-theme-minimal .th-category-card:hover {
    box-shadow: none;
    transform: none;
    border-color: var(--th-primary);
}

.th-theme-minimal .th-btn {
    border-radius: var(--th-radius);
}

.th-theme-minimal .th-btn-primary {
    background: var(--th-primary);
}

.th-theme-minimal .th-btn-primary:hover {
    background: var(--th-primary-dark);
    transform: none;
    box-shadow: none;
}

.th-theme-minimal .th-tool-header-icon {
    background: var(--th-primary);
    border-radius: var(--th-radius);
}

.th-theme-minimal .th-category-card-icon {
    border-radius: var(--th-radius);
}

.th-theme-minimal .th-badge {
    border-radius: var(--th-radius);
}

.th-theme-minimal .th-share-btn:hover {
    transform: none;
    box-shadow: none;
}

.th-theme-minimal .th-search-input {
    border-radius: var(--th-radius);
}

.th-theme-minimal .th-search-btn {
    border-radius: var(--th-radius);
}

/* ==========================================================================
   COLORFUL THEME
   ========================================================================== */

.th-theme-colorful {
    --th-primary: #8b5cf6;
    --th-primary-dark: #7c3aed;
    --th-primary-light: rgba(139, 92, 246, 0.12);
    --th-secondary: #ec4899;
    --th-gradient: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #f97316 100%);
    --th-gradient-hover: linear-gradient(135deg, #7c3aed 0%, #db2777 50%, #ea580c 100%);
    
    --th-success: #22c55e;
    --th-success-light: #dcfce7;
    --th-danger: #f43f5e;
    --th-danger-light: #ffe4e6;
    --th-warning: #eab308;
    --th-warning-light: #fef9c3;
    --th-info: #06b6d4;
    --th-info-light: #cffafe;
    
    --th-radius: 16px;
    --th-radius-sm: 8px;
    --th-radius-lg: 24px;
    --th-radius-xl: 32px;
}

.th-theme-colorful .th-tool-card {
    border-radius: var(--th-radius-lg);
}

.th-theme-colorful .th-tool-card:hover {
    transform: translateY(-6px) rotate(-1deg);
}

.th-theme-colorful .th-category-card:hover {
    transform: translateY(-6px) rotate(1deg);
}

.th-theme-colorful .th-category-card-icon {
    background: var(--th-gradient);
    color: #fff;
}

.th-theme-colorful .th-category-card:hover .th-category-card-icon {
    animation: th-wiggle 0.5s ease;
}

@keyframes th-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

.th-theme-colorful .th-btn-primary {
    background: var(--th-gradient);
    background-size: 200% 200%;
    animation: th-gradient-shift 3s ease infinite;
}

@keyframes th-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.th-theme-colorful .th-badge-solid-primary {
    background: var(--th-gradient);
}

.th-theme-colorful .th-tool-header-icon {
    background: var(--th-gradient);
    border-radius: var(--th-radius-lg);
}

.th-theme-colorful .th-search-btn {
    background: var(--th-gradient);
}

.th-theme-colorful .th-pagination-item.active {
    background: var(--th-gradient);
}

.th-theme-colorful .th-star.filled {
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

/* ==========================================================================
   BLUE THEME
   ========================================================================== */

.th-theme-blue {
    --th-primary: #2563eb;
    --th-primary-dark: #1d4ed8;
    --th-primary-light: rgba(37, 99, 235, 0.1);
    --th-secondary: #0ea5e9;
    --th-gradient: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
    --th-gradient-hover: linear-gradient(135deg, #1d4ed8 0%, #0284c7 100%);
}

/* ==========================================================================
   GREEN THEME
   ========================================================================== */

.th-theme-green {
    --th-primary: #059669;
    --th-primary-dark: #047857;
    --th-primary-light: rgba(5, 150, 105, 0.1);
    --th-secondary: #10b981;
    --th-gradient: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --th-gradient-hover: linear-gradient(135deg, #047857 0%, #059669 100%);
}

/* ==========================================================================
   ORANGE THEME
   ========================================================================== */

.th-theme-orange {
    --th-primary: #ea580c;
    --th-primary-dark: #c2410c;
    --th-primary-light: rgba(234, 88, 12, 0.1);
    --th-secondary: #f97316;
    --th-gradient: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    --th-gradient-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
}

/* ==========================================================================
   ROSE THEME
   ========================================================================== */

.th-theme-rose {
    --th-primary: #e11d48;
    --th-primary-dark: #be123c;
    --th-primary-light: rgba(225, 29, 72, 0.1);
    --th-secondary: #f43f5e;
    --th-gradient: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
    --th-gradient-hover: linear-gradient(135deg, #be123c 0%, #e11d48 100%);
}

/* ==========================================================================
   CUSTOM THEME BUILDER (CSS Variables Override)
   ========================================================================== */

.th-theme-custom {
    --th-primary: var(--th-custom-primary, #667eea);
    --th-primary-dark: var(--th-custom-primary-dark, #5a6fd6);
    --th-primary-light: var(--th-custom-primary-light, rgba(102, 126, 234, 0.1));
    --th-secondary: var(--th-custom-secondary, #764ba2);
    --th-gradient: var(--th-custom-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    --th-gradient-hover: var(--th-custom-gradient-hover, linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%));
    
    --th-text: var(--th-custom-text, #1f2937);
    --th-text-muted: var(--th-custom-text-muted, #6b7280);
    
    --th-bg: var(--th-custom-bg, #ffffff);
    --th-bg-alt: var(--th-custom-bg-alt, #f9fafb);
    
    --th-border: var(--th-custom-border, #e5e7eb);
    
    --th-radius: var(--th-custom-radius, 8px);
    --th-font-family: var(--th-custom-font-family, inherit);
}

/* ==========================================================================
   RESPONSIVE THEME ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .th-theme-colorful .th-tool-card:hover,
    .th-theme-colorful .th-category-card:hover {
        transform: translateY(-4px);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .th-wrap *,
    .th-wrap *::before,
    .th-wrap *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .th-theme-colorful .th-btn-primary {
        animation: none;
    }
    
    .th-theme-colorful .th-category-card:hover .th-category-card-icon {
        animation: none;
    }
}

/* ==========================================================================
   HIGH CONTRAST MODE
   ========================================================================== */

@media (prefers-contrast: high) {
    .th-wrap {
        --th-border: #000000;
        --th-shadow: none;
        --th-shadow-md: none;
        --th-shadow-lg: none;
    }
    
    .th-tool-card,
    .th-category-card {
        border: 2px solid var(--th-border);
    }
    
    .th-btn {
        border: 2px solid currentColor;
    }
    
    .th-input,
    .th-select,
    .th-textarea {
        border-width: 2px;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .th-wrap {
        --th-shadow: none;
        --th-shadow-sm: none;
        --th-shadow-md: none;
        --th-shadow-lg: none;
        --th-shadow-xl: none;
    }
    
    .th-tool-card,
    .th-category-card,
    .th-tool-wrapper {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .th-btn,
    .th-share-buttons,
    .th-pagination,
    .th-filter-bar,
    .th-search-form,
    .th-modal-overlay,
    .th-toast-container {
        display: none !important;
    }
    
    .th-tool-description-content.collapsed {
        max-height: none;
    }
    
    .th-tool-description-content.collapsed::after {
        display: none;
    }
    
    .th-tool-description-toggle {
        display: none;
    }
}