/**
 * Theme CSS Variables
 * Single source of truth for all color themes
 */

:root {
    /* Dark theme (default) */
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-tertiary: #1a1a1a;
    --text-primary: #f5f5f5;
    --text-secondary: #a0a0a0;
    --accent-primary: #d4af37;
    --accent-secondary: #8b7355;
    --border-color: #2a2a2a;
    --navbar-bg: rgba(0, 0, 0, 0.6);
    --navbar-border: #2a2a2a;
    --radius-sm: 0.125rem;
    --radius-md: 0.125rem;
    --radius-lg: 0.125rem;
    --card-shadow: none;
    --input-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    --grain-opacity: 0.05;
}

/* Smooth theme transitions */
html {
    transition: background-color 0.3s ease;
}

/* Light theme */
html.light {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e5e5e5;
    --text-primary: #0a0a0a;
    --text-secondary: #666666;
    --border-color: #d4d4d4;
    --navbar-bg: rgba(255, 255, 255, 0.9);
    --navbar-border: #d4d4d4;
    --radius-sm: 0.125rem;
    --radius-md: 0.125rem;
    --radius-lg: 0.125rem;
    --card-shadow: none;
    --input-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    --grain-opacity: 0.02;
}

/* Modern theme — fresh, rounded, vibrant */
html.modern {
    --bg-primary: #13111c;
    --bg-secondary: #1e1b2e;
    --bg-tertiary: #282540;
    --text-primary: #e8e6f0;
    --text-secondary: #9b97b8;
    --accent-primary: #7c6aff;
    --accent-secondary: #43b8ff;
    --border-color: #332f52;
    --navbar-bg: rgba(19, 17, 28, 0.8);
    --navbar-border: rgba(124, 106, 255, 0.2);
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --card-shadow: 0 4px 24px rgba(124, 106, 255, 0.08);
    --input-shadow: 0 0 0 3px rgba(124, 106, 255, 0.15);
    --grain-opacity: 0;
}

/* Modern theme specific enhancements */
html.modern .card,
html.modern .card-sm,
html.modern .card-static,
html.modern .faq-item,
html.modern .stat-card {
    box-shadow: var(--card-shadow);
    border-color: var(--border-color);
    backdrop-filter: blur(6px);
}

html.modern .card:hover,
html.modern .stat-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 8px 32px rgba(124, 106, 255, 0.15);
}

html.modern .btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    box-shadow: 0 4px 16px rgba(124, 106, 255, 0.3);
}

html.modern .btn-primary:hover {
    box-shadow: 0 6px 24px rgba(124, 106, 255, 0.45);
}

html.modern .text-gradient {
    background: linear-gradient(135deg, #7c6aff, #43b8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html.modern .subscription-badge {
    background: linear-gradient(135deg, #7c6aff, #43b8ff) !important;
}

html.modern ::-webkit-scrollbar-thumb {
    background: #7c6aff;
    border-radius: 8px;
}

html.modern ::-webkit-scrollbar-thumb:hover {
    background: #43b8ff;
}

html.modern ::-webkit-scrollbar-track {
    background: #1a1a2e;
}

html.modern .grain {
    background-image: none;
}

html.modern .toggle-switch.active {
    background: linear-gradient(135deg, #7c6aff, #43b8ff);
}

/* Modern theme: override Tailwind's rounded utilities */
html.modern .rounded-sm {
    border-radius: 0.5rem !important;
}

html.modern .rounded-lg {
    border-radius: 1rem !important;
}

html.modern .input-field {
    border-radius: 0.5rem;
}

html.modern nav {
    backdrop-filter: blur(20px);
}

html.modern #navProfileDropdown {
    border-radius: 0.75rem;
}

/* Global smooth transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
}

/* Navbar theming */
nav {
    background: var(--navbar-bg) !important;
    border-bottom-color: var(--navbar-border) !important;
}