/* Theme Variables - Boudoir (default) */
:root {
    --bg-primary: #1c1917;
    --bg-secondary: #292524;
    --bg-accent: #f59e0b;
    --bg-accent-hover: #d97706;
    --text-primary: #fef3c7;
    --text-secondary: #fde68a;
    --text-muted: #fbbf24;
    --text-on-accent: #1c1917;
    --border-color: #44403c;
    --border-accent: #f59e0b;
    --hero-from: #292524;
    --hero-to: #3d2914;
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-accent: #7c3aed;
    --bg-accent-hover: #6d28d9;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --text-on-accent: #ffffff;
    --border-color: #e5e7eb;
    --border-accent: #7c3aed;
    --hero-from: #667eea;
    --hero-to: #764ba2;
}

/* Noir Theme - Dark & Elegant */
[data-theme="noir"] {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-accent: #dc2626;
    --bg-accent-hover: #b91c1c;
    --text-primary: #f5f5f5;
    --text-secondary: #d4d4d4;
    --text-muted: #a3a3a3;
    --text-on-accent: #ffffff;
    --border-color: #262626;
    --border-accent: #dc2626;
    --hero-from: #1a1a1a;
    --hero-to: #2d1f1f;
}

/* Velvet Theme - Deep Purple */
[data-theme="velvet"] {
    --bg-primary: #1e1b2e;
    --bg-secondary: #2a2640;
    --bg-accent: #a855f7;
    --bg-accent-hover: #9333ea;
    --text-primary: #f3e8ff;
    --text-secondary: #d8b4fe;
    --text-muted: #c084fc;
    --text-on-accent: #ffffff;
    --border-color: #3b3660;
    --border-accent: #a855f7;
    --hero-from: #2a2640;
    --hero-to: #4a1d6b;
}

/* Midnight Theme - Blue-Black */
[data-theme="midnight"] {
    --bg-primary: #0c1222;
    --bg-secondary: #131c31;
    --bg-accent: #3b82f6;
    --bg-accent-hover: #2563eb;
    --text-primary: #e0f2fe;
    --text-secondary: #bae6fd;
    --text-muted: #7dd3fc;
    --text-on-accent: #ffffff;
    --border-color: #1e3a5f;
    --border-accent: #3b82f6;
    --hero-from: #131c31;
    --hero-to: #1e1b4b;
}

/* Rose Theme - Romantic Pink */
[data-theme="rose"] {
    --bg-primary: #1a1318;
    --bg-secondary: #2d1f28;
    --bg-accent: #ec4899;
    --bg-accent-hover: #db2777;
    --text-primary: #fdf2f8;
    --text-secondary: #fbcfe8;
    --text-muted: #f9a8d4;
    --text-on-accent: #ffffff;
    --border-color: #4a3040;
    --border-accent: #ec4899;
    --hero-from: #2d1f28;
    --hero-to: #500724;
}

/* Apply Theme Variables */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-themed { background-color: var(--bg-primary); }
.bg-themed-secondary { background-color: var(--bg-secondary); }
.bg-themed-accent { background-color: var(--bg-accent); }
.bg-themed-accent:hover { background-color: var(--bg-accent-hover); }
.text-themed { color: var(--text-primary); }
.text-themed-secondary { color: var(--text-secondary); }
.text-themed-muted { color: var(--text-muted); }
.text-themed-accent { color: var(--bg-accent); }
.text-on-accent { color: var(--text-on-accent); }
.border-themed { border-color: var(--border-color); }
.border-themed-accent { border-color: var(--border-accent); }

.hero-gradient {
    background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-to) 100%);
}

.icon-bg-wrapper {
    background-color: color-mix(in srgb, var(--bg-accent) 15%, transparent);
}

/* Theme Switcher Buttons */
.theme-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

.theme-btn:hover {
    transform: scale(1.15);
}

.theme-btn.active {
    border-color: white;
    box-shadow: 0 0 0 2px var(--bg-accent);
}

.theme-btn-boudoir { background: linear-gradient(135deg, #292524, #f59e0b); }
.theme-btn-light { background: linear-gradient(135deg, #667eea, #764ba2); }
.theme-btn-noir { background: linear-gradient(135deg, #1a1a1a, #dc2626); }
.theme-btn-velvet { background: linear-gradient(135deg, #2a2640, #a855f7); }
.theme-btn-midnight { background: linear-gradient(135deg, #131c31, #3b82f6); }
.theme-btn-rose { background: linear-gradient(135deg, #2d1f28, #ec4899); }

/* Form inputs with theme support */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--bg-accent);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-accent) 25%, transparent);
}

/* Buttons */
.btn-primary {
    background-color: var(--bg-accent);
    color: var(--text-on-accent);
}

.btn-primary:hover {
    background-color: var(--bg-accent-hover);
}

/* Cards and panels */
.card, .panel {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}