/* ===== themes.css - Color Theme Overrides ===== */
/* Three themes × 2 modes = 6 blocks. Loaded after app.css to override CSS custom properties. */

/* ============================================
   THEME 1: Dark & Premium (navy/goud)
   ============================================ */

/* Light mode */
[data-site-theme="dark-premium"][data-bs-theme="light"] {
    --btw-primary: #c9a227;
    --btw-primary-hover: #b8911f;
    --btw-gradient-start: #1e293b;
    --btw-gradient-end: #334155;
    --btw-hero-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --btw-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.06);
    --btw-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.08);
    --btw-nav-hover-bg: rgba(201, 162, 39, 0.1);
    --btw-feature-icon-bg: rgba(201, 162, 39, 0.12);
    --btw-focus-ring: rgba(201, 162, 39, 0.2);
    --btw-focus-ring-subtle: rgba(201, 162, 39, 0.12);
    --btw-selection-bg: rgba(201, 162, 39, 0.2);
    --btw-palette-hover-bg: rgba(201, 162, 39, 0.1);
    --btw-score-bg: #fef9e7;
}

/* Dark mode */
[data-site-theme="dark-premium"][data-bs-theme="dark"] {
    --btw-primary: #e5b82a;
    --btw-primary-hover: #f0c940;
    --btw-gradient-start: #0f172a;
    --btw-gradient-end: #1e293b;
    --btw-hero-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --btw-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.2);
    --btw-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.35), 0 16px 32px rgba(0, 0, 0, 0.25);
    --btw-nav-bg: rgba(15, 23, 42, 0.95);
    --btw-nav-border: rgba(229, 184, 42, 0.1);
    --btw-footer-bg: #0c1322;
    --btw-nav-hover-bg: rgba(229, 184, 42, 0.12);
    --btw-feature-icon-bg: rgba(229, 184, 42, 0.15);
    --btw-focus-ring: rgba(229, 184, 42, 0.25);
    --btw-focus-ring-subtle: rgba(229, 184, 42, 0.15);
    --btw-selection-bg: rgba(229, 184, 42, 0.25);
    --btw-palette-hover-bg: rgba(229, 184, 42, 0.12);
    --btw-score-bg: #1a1a0e;
}

/* ============================================
   THEME 2: Modern Blauw-Teal
   ============================================ */

/* Light mode */
[data-site-theme="modern-blue"][data-bs-theme="light"] {
    --btw-primary: #0ea5e9;
    --btw-primary-hover: #0284c7;
    --btw-gradient-start: #0ea5e9;
    --btw-gradient-end: #10b981;
    --btw-hero-bg: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
    --btw-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
    --btw-card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
    --btw-nav-hover-bg: rgba(14, 165, 233, 0.08);
    --btw-feature-icon-bg: rgba(14, 165, 233, 0.1);
    --btw-focus-ring: rgba(14, 165, 233, 0.2);
    --btw-focus-ring-subtle: rgba(14, 165, 233, 0.1);
    --btw-selection-bg: rgba(14, 165, 233, 0.15);
    --btw-palette-hover-bg: rgba(14, 165, 233, 0.08);
    --btw-score-bg: #ecfdf5;
}

/* Dark mode */
[data-site-theme="modern-blue"][data-bs-theme="dark"] {
    --btw-primary: #38bdf8;
    --btw-primary-hover: #7dd3fc;
    --btw-gradient-start: #0369a1;
    --btw-gradient-end: #047857;
    --btw-hero-bg: linear-gradient(135deg, #0c4a6e 0%, #064e3b 100%);
    --btw-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
    --btw-card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.2);
    --btw-nav-bg: rgba(12, 30, 44, 0.95);
    --btw-nav-border: rgba(56, 189, 248, 0.1);
    --btw-footer-bg: #0a1628;
    --btw-nav-hover-bg: rgba(56, 189, 248, 0.1);
    --btw-feature-icon-bg: rgba(56, 189, 248, 0.12);
    --btw-focus-ring: rgba(56, 189, 248, 0.2);
    --btw-focus-ring-subtle: rgba(56, 189, 248, 0.12);
    --btw-selection-bg: rgba(56, 189, 248, 0.2);
    --btw-palette-hover-bg: rgba(56, 189, 248, 0.1);
    --btw-score-bg: #0a1f1a;
}

/* ============================================
   THEME 3: Warm & Strak (beige/rood)
   ============================================ */

/* Light mode */
[data-site-theme="warm-clean"][data-bs-theme="light"] {
    --btw-primary: #dc2626;
    --btw-primary-hover: #b91c1c;
    --btw-gradient-start: #fef3c7;
    --btw-gradient-end: #fde68a;
    --btw-hero-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --btw-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(120, 80, 20, 0.06);
    --btw-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(120, 80, 20, 0.08);
    --btw-footer-bg: #faf5ee;
    --btw-nav-hover-bg: rgba(220, 38, 38, 0.08);
    --btw-feature-icon-bg: rgba(220, 38, 38, 0.1);
    --btw-focus-ring: rgba(220, 38, 38, 0.2);
    --btw-focus-ring-subtle: rgba(220, 38, 38, 0.1);
    --btw-selection-bg: rgba(220, 38, 38, 0.15);
    --btw-palette-hover-bg: rgba(220, 38, 38, 0.08);
    --btw-score-bg: #fef2f2;
}

/* Warm hero needs dark text */
[data-site-theme="warm-clean"][data-bs-theme="light"] .btw-hero {
    color: #1c1917;
}
[data-site-theme="warm-clean"][data-bs-theme="light"] .btw-hero .lead {
    opacity: 0.75;
}
[data-site-theme="warm-clean"][data-bs-theme="light"] .btw-trust-badge {
    background: rgba(28, 25, 23, 0.08);
    color: #44403c;
    border-color: rgba(28, 25, 23, 0.12);
}
[data-site-theme="warm-clean"][data-bs-theme="light"] .btw-search-box {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(28, 25, 23, 0.1);
}
[data-site-theme="warm-clean"][data-bs-theme="light"] .btw-search-box .btn-check-vat {
    background: #dc2626;
    color: #fff;
}
[data-site-theme="warm-clean"][data-bs-theme="light"] .btw-search-box .btn-check-vat:hover {
    background: #b91c1c;
}
[data-site-theme="warm-clean"][data-bs-theme="light"] .btw-cta {
    background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
    color: #fff;
}

/* Dark mode */
[data-site-theme="warm-clean"][data-bs-theme="dark"] {
    --btw-primary: #ef4444;
    --btw-primary-hover: #f87171;
    --btw-gradient-start: #451a03;
    --btw-gradient-end: #7c2d12;
    --btw-hero-bg: linear-gradient(135deg, #292524 0%, #44403c 100%);
    --btw-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
    --btw-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.25);
    --btw-nav-bg: rgba(28, 25, 23, 0.95);
    --btw-nav-border: rgba(239, 68, 68, 0.1);
    --btw-footer-bg: #1a1715;
    --btw-nav-hover-bg: rgba(239, 68, 68, 0.1);
    --btw-feature-icon-bg: rgba(239, 68, 68, 0.12);
    --btw-focus-ring: rgba(239, 68, 68, 0.25);
    --btw-focus-ring-subtle: rgba(239, 68, 68, 0.12);
    --btw-selection-bg: rgba(239, 68, 68, 0.2);
    --btw-palette-hover-bg: rgba(239, 68, 68, 0.1);
    --btw-score-bg: #1f1210;
}