/**
 * Pocket-Sommelier - Theme Styles v5.0
 * Dark/Light Mode — WEINROT (#722F37) als Corporate Identity in BEIDEN Modi
 *
 * v5.0 Änderungen:
 * - Weinrot-Navigation und CI jetzt auch im Dark Mode
 * - Gemeinsame Weinrot-Regeln (keine Theme-Prefix nötig)
 * - Tints/Opacities mode-spezifisch (Light: subtil, Dark: kräftiger)
 *
 * Farbsystem:
 *   Corporate:  #722F37 (Weinrot), #4B0D18 (Dunkel), #8c2942 (Hell)
 *   Akzent:     #C5A059 / #D4AF37 (Gold) — Sekundärakzent
 *   Light:      #FAF5F2 / #FFFBF9 / #F2EAE7 (Elfenbein-Flächen)
 *   Dark:       #111827 / #1F2937 / #374151 (Slate-Flächen)
 */

/* ==================== Light Theme ==================== */
:root,
[data-theme="light"] {
    --bg-primary: #FAF5F2;
    --bg-secondary: #FFFBF9;
    --bg-tertiary: #F2EAE7;
    
    --text-primary: #2A1215;
    --text-secondary: #5C4047;
    --text-tertiary: #9C878C;
    
    --border-color: #E6D9D5;
    --border-color-light: #F0E8E5;
    
    --nav-bg: #722F37;
    --modal-bg: rgba(42, 18, 21, 0.5);

    --danger-bg: #FEF0F0;
    --toast-bg: #4B0D18;
    --toast-color: #FFFBF9;
    
    --wine-corporate: #722F37;
    --wine-corporate-dark: #4B0D18;
    --wine-corporate-light: #8c2942;
    
    /* Weinrot-Tints für helle Flächen (subtil) */
    --wine-tint-subtle: rgba(114, 47, 55, 0.06);
    --wine-tint-medium: rgba(114, 47, 55, 0.08);
    --wine-tint-strong: rgba(114, 47, 55, 0.12);
    
    --cream: #FAF5F2;
    --white: #FFFBF9;
    --stone-50: #F8F2EF;
    --gray-900: #2A1215;
    --gray-800: #3D2125;
    --gray-600: #5C4047;
    --gray-400: #9C878C;
    --gray-300: #C4B3B0;
    --gray-200: #E6D9D5;
    --gray-100: #F2EAE7;
    
    color-scheme: light;
}

/* ==================== Dark Theme ==================== */
[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1F2937;
    --bg-tertiary: #374151;
    
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-tertiary: #9CA3AF;
    
    --border-color: #374151;
    --border-color-light: #4B5563;
    
    --nav-bg: #722F37;
    --modal-bg: rgba(0, 0, 0, 0.7);

    --danger-bg: #3B1A1A;
    --toast-bg: #F9FAFB;
    --toast-color: #111827;
    
    --wine-corporate: #722F37;
    --wine-corporate-dark: #4B0D18;
    --wine-corporate-light: #8c2942;
    
    /* Weinrot-Tints für dunkle Flächen (kräftiger) */
    --wine-tint-subtle: rgba(140, 41, 66, 0.10);
    --wine-tint-medium: rgba(140, 41, 66, 0.15);
    --wine-tint-strong: rgba(140, 41, 66, 0.22);
    
    --cream: #111827;
    --white: #1F2937;
    --stone-50: #1F2937;
    --gray-900: #F9FAFB;
    --gray-800: #F3F4F6;
    --gray-600: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-300: #4B5563;
    --gray-200: #374151;
    --gray-100: #2D3748;
    
    color-scheme: dark;
}

/* ==================== System Theme Detection ==================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #111827;
        --bg-secondary: #1F2937;
        --bg-tertiary: #374151;
        
        --text-primary: #F9FAFB;
        --text-secondary: #D1D5DB;
        --text-tertiary: #9CA3AF;
        
        --border-color: #374151;
        --border-color-light: #4B5563;
        
        --nav-bg: #722F37;
        --modal-bg: rgba(0, 0, 0, 0.7);

        --danger-bg: #3B1A1A;
        --toast-bg: #F9FAFB;
        --toast-color: #111827;
        
        --wine-corporate: #722F37;
        --wine-corporate-dark: #4B0D18;
        --wine-corporate-light: #8c2942;
        
        --wine-tint-subtle: rgba(140, 41, 66, 0.10);
        --wine-tint-medium: rgba(140, 41, 66, 0.15);
        --wine-tint-strong: rgba(140, 41, 66, 0.22);
        
        --cream: #111827;
        --white: #1F2937;
        --stone-50: #1F2937;
        --gray-900: #F9FAFB;
        --gray-800: #F3F4F6;
        --gray-600: #D1D5DB;
        --gray-400: #9CA3AF;
        --gray-300: #4B5563;
        --gray-200: #374151;
        --gray-100: #2D3748;
        
        color-scheme: dark;
    }
}


/* ======================================================================
   WEINROT NAVIGATION — Beide Modi identisch
   ====================================================================== */

.glass-nav {
    background: #722F37 !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 -4px 30px rgba(75, 13, 24, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Inaktive Nav-Items: Helles Rosé auf Weinrot */
.nav-item {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Aktive Nav-Items: Gold auf Weinrot */
.nav-item.active {
    color: #D4AF37 !important;
}

/* Active Dot: Gold */
.active-dot {
    background-color: #D4AF37 !important;
}

/* Ripple: Heller Schimmer */
.nav-item::before {
    background: rgba(255, 255, 255, 0.15);
}

/* Hero-Button: Gold auf Weinrot */
.hero-button {
    background-color: var(--gold) !important;
    box-shadow:
        0 0 0 5px rgba(212, 175, 55, 0.3),
        0 0 0 10px rgba(114, 47, 55, 0.3),
        0 4px 12px rgba(75, 13, 24, 0.3) !important;
}

.hero-button:hover {
    box-shadow:
        0 0 0 5px rgba(212, 175, 55, 0.4),
        0 0 0 10px rgba(114, 47, 55, 0.35),
        0 6px 16px rgba(75, 13, 24, 0.35) !important;
}


/* ======================================================================
   PRIMARY BUTTONS — Weinrot (beide Modi)
   ====================================================================== */

.btn-primary {
    background: linear-gradient(135deg, #722F37 0%, #4B0D18 100%) !important;
    box-shadow: 0 4px 15px rgba(114, 47, 55, 0.35);
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(114, 47, 55, 0.45) !important;
}


/* ======================================================================
   SCAN HERO CARD — Weinrot-Gradient (beide Modi)
   ====================================================================== */

.scan-hero {
    background: linear-gradient(135deg, #722F37 0%, #8c2942 40%, #4B0D18 100%) !important;
}

.scan-hero:hover {
    box-shadow: 0 8px 30px rgba(114, 47, 55, 0.35);
}

.feature-pill {
    background: rgba(255, 255, 255, 0.14);
}

.scan-hero-cta {
    background: rgba(212, 175, 55, 0.25);
}


/* ======================================================================
   TEXT-SELEKTION — Weinrot (beide Modi)
   ====================================================================== */

::selection {
    background: #722F37;
    color: #fff;
}


/* ======================================================================
   SOLIDE WEINROT-ELEMENTE — Beide Modi identisch
   ====================================================================== */

/* Toggle aktiv */
.toggle-switch.active {
    background: #722F37 !important;
}

/* Plan Card selected */
.plan-card.selected {
    border-color: #722F37 !important;
}

.plan-card.selected .plan-radio {
    border-color: #722F37;
}

.plan-radio-dot {
    background: #722F37 !important;
}

/* Notify subscribed */
.notify-btn.subscribed {
    background: #722F37 !important;
    color: white !important;
    border-color: #722F37 !important;
}

/* Status badge premium */
.status-badge.premium {
    background: #722F37 !important;
}

/* Bento Featured Card */
.bento-card.featured {
    background: linear-gradient(135deg, #722F37 0%, #8c2942 50%, #4B0D18 100%) !important;
}

.bento-card.featured:hover {
    box-shadow: 0 8px 30px rgba(114, 47, 55, 0.3);
}

/* Scan Mode Card active */
.scan-mode-card.active {
    border-color: #722F37 !important;
    background: var(--wine-tint-subtle) !important;
}

.scan-mode-card.active .scan-mode-card-check {
    border-color: #722F37;
    background: #722F37;
}

/* Scan Timer Progress */
.scan-timer-progress {
    stroke: #722F37 !important;
    filter: drop-shadow(0 0 6px rgba(114, 47, 55, 0.3));
}

/* Scan Wine Rank-1 Button */
.scan-wine-card.rank-1 .scan-wine-card-actions .scan-wine-select-btn {
    background: #722F37 !important;
    color: #fff;
}

.scan-wine-card.rank-1 .scan-wine-card-actions .scan-wine-select-btn:hover {
    background: #5f2630 !important;
}

/* Shelf Marker Top */
.scan-shelf-marker.marker-top {
    border-color: rgba(114, 47, 55, 0.8);
    box-shadow: 0 0 12px rgba(114, 47, 55, 0.35);
}

/* Scan Wine Badge */
.scan-wine-badge {
    background: rgba(114, 47, 55, 0.85);
}

/* Focus Ring */
:focus-visible {
    outline-color: #722F37 !important;
}

/* Scan Dish hover */
.scan-dish-compact:hover {
    border-color: #722F37;
}

/* Confidence Title Badge */
.journal-confidence-title-badge {
    background: linear-gradient(135deg, #722F37 0%, #4B0D18 100%) !important;
    box-shadow: 0 2px 8px rgba(114, 47, 55, 0.3);
}

/* Micro-Task Icon */
.micro-task-icon {
    background: linear-gradient(135deg, #722F37 0%, #8c2942 100%) !important;
}


/* ======================================================================
   TASTE QUESTIONNAIRE — Weinrot (beide Modi)
   ====================================================================== */

.tq-nav-next,
.tq-nav-submit,
.tq-complete-btn,
.tq-cta-btn {
    background: linear-gradient(135deg, #722F37 0%, #4B0D18 100%) !important;
    box-shadow: 0 2px 8px rgba(114, 47, 55, 0.3);
}

.tq-nav-next:hover,
.tq-nav-submit:hover,
.tq-complete-btn:hover,
.tq-cta-btn:hover {
    box-shadow: 0 4px 15px rgba(114, 47, 55, 0.4) !important;
}

.tq-option.selected {
    border-color: #722F37 !important;
    background: var(--wine-tint-subtle) !important;
    box-shadow: 0 0 0 1px #722F37;
}

.tq-option:hover {
    border-color: #722F37;
}

.tq-option.selected .tq-option-radio {
    border-color: #722F37 !important;
    background: #722F37 !important;
}

.tq-progress-fill {
    background: linear-gradient(90deg, #722F37 0%, #8c2942 100%) !important;
}

.tq-step-indicator {
    color: #722F37;
}


/* ======================================================================
   TINT-BASIERTE ELEMENTE — Nutzen --wine-tint-* Variablen
   (automatisch mode-angepasst: Light subtil, Dark kräftiger)
   ====================================================================== */

/* Scan Card Icons */
.scan-card-icon {
    background: var(--wine-tint-medium) !important;
    color: var(--wine-corporate-light) !important;
}

[data-theme="dark"] .scan-card-icon {
    color: #e8a0ae !important;
}

/* Scan New Tag */
.scan-new-tag {
    background: var(--wine-tint-medium) !important;
    color: var(--wine-corporate) !important;
}

[data-theme="dark"] .scan-new-tag {
    color: #e8a0ae !important;
}

/* Quick Link Wine */
.ql-wine {
    background: var(--wine-tint-medium) !important;
    color: var(--wine-corporate) !important;
}

[data-theme="dark"] .ql-wine {
    color: #e8a0ae !important;
}

/* TQ Info Button */
.tq-info-btn {
    background: var(--wine-tint-subtle);
    border-color: rgba(114, 47, 55, 0.18);
    color: var(--wine-corporate);
}

[data-theme="dark"] .tq-info-btn {
    color: #e8a0ae;
    border-color: rgba(140, 41, 66, 0.3);
}

.tq-info-btn:hover {
    background: var(--wine-tint-strong);
    border-color: var(--wine-corporate);
}

/* TQ CTA Home Banner */
.tq-cta-home {
    background: linear-gradient(135deg, var(--wine-tint-medium) 0%, var(--wine-tint-subtle) 100%);
    border-color: rgba(114, 47, 55, 0.18);
}

[data-theme="dark"] .tq-cta-home {
    border-color: rgba(140, 41, 66, 0.3);
}

.tq-cta-home:hover {
    border-color: var(--wine-corporate);
    box-shadow: 0 4px 20px rgba(114, 47, 55, 0.12);
}

/* TQ/Complete Icon Wraps */
.tq-cta-icon-wrap,
.tq-complete-hint-icon,
.tq-info-icon-wrap {
    background: var(--wine-tint-medium);
    color: var(--wine-corporate);
}

[data-theme="dark"] .tq-cta-icon-wrap,
[data-theme="dark"] .tq-complete-hint-icon,
[data-theme="dark"] .tq-info-icon-wrap {
    color: #e8a0ae;
}

/* Journal OFFEN Attention */
.journal-stat-open-attention {
    border-color: var(--wine-corporate) !important;
    background: linear-gradient(135deg, var(--wine-tint-medium) 0%, var(--wine-tint-subtle) 100%) !important;
}

.journal-stat-open-attention .journal-stat-value {
    color: var(--wine-corporate) !important;
}

[data-theme="dark"] .journal-stat-open-attention .journal-stat-value {
    color: #e8a0ae !important;
}

.journal-stat-open-attention .journal-stat-label {
    color: var(--wine-corporate) !important;
}

[data-theme="dark"] .journal-stat-open-attention .journal-stat-label {
    color: #e8a0ae !important;
}

/* Bento Card hover */
.bento-card:hover {
    border-color: var(--wine-corporate);
    box-shadow: 0 4px 20px rgba(114, 47, 55, 0.08);
}

/* Plan Card selected shadow */
.plan-card.selected {
    box-shadow:
        0 0 0 3px var(--wine-tint-medium),
        0 4px 16px rgba(114, 47, 55, 0.08);
}

/* Settings hover accent */
.settings-item:hover {
    border-left: 2px solid rgba(114, 47, 55, 0.2);
}


/* ======================================================================
   LIGHT-MODE ONLY — Spezifische Feinheiten
   ====================================================================== */

/* Profile Avatar: Rosé-Töne im Light Mode */
:root:not([data-theme="dark"]) .profile-avatar {
    background: linear-gradient(135deg, #f2e0e3 0%, #e8d0d4 100%);
}

/* Scrollbar Light */
:root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb {
    background: #D4C5BF;
}
:root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover {
    background: #B8A49D;
}


/* ======================================================================
   DARK-MODE ONLY — Spezifische Feinheiten
   ====================================================================== */

/* Profile Avatar: Dunkle Weintöne */
[data-theme="dark"] .profile-avatar {
    background: linear-gradient(135deg, #3a2020 0%, #4a2830 100%);
}


/* ======================================================================
   GOLD ALS SEKUNDÄRAKZENT — Bewusst Gold in beiden Modi
   ====================================================================== */

/*
 * Folgendes bleibt Gold:
 * - Hero-Button (Scan-CTA)
 * - Links (<a>)
 * - Premium-Banner (Gold = Luxus)
 * - Wine-Card Match-Score
 * - Profile Ring Progress
 * - Active Nav Items (Gold auf Weinrot)
 * - Active Dot in Nav
 * - Scan-Hero CTA Button
 */


/* ======================================================================
   THEME-AWARE GLOBAL COMPONENTS
   ====================================================================== */

body {
    background-color: var(--bg-primary, var(--cream));
    color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

.settings-card,
.bento-card:not(.featured),
.modal-content {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.settings-item {
    border-color: var(--border-color-light);
}

.settings-item:hover,
.settings-item:active {
    background: var(--bg-tertiary);
}

.modal-overlay {
    background: var(--modal-bg);
}

.section-header {
    color: var(--text-tertiary);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.notify-btn {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.input-field {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.input-field::placeholder {
    color: var(--text-tertiary);
}

.lang-select {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.placeholder-icon {
    background: var(--bg-tertiary);
}

.avatar {
    background: var(--bg-tertiary);
}

.sub-screen {
    background: var(--bg-primary);
}

.sub-screen-header {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.toggle-switch {
    background: var(--border-color);
}


/* ==================== More Page ==================== */

.delete-input {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.delete-input::placeholder {
    color: var(--text-tertiary);
}

.delete-input.valid {
    background: var(--danger-bg);
    border-color: #EF4444;
}

.toast {
    background: var(--toast-bg);
    color: var(--toast-color);
}

.status-badge.free {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.account-info,
.account-detail,
.account-label {
    color: var(--text-secondary);
}

.account-value {
    color: var(--text-primary);
}

.settings-item-label,
.settings-item-title {
    color: var(--text-primary);
}

.settings-item-subtitle,
.settings-item-desc,
.settings-item-value {
    color: var(--text-secondary);
}

.settings-item svg,
.settings-item .icon-right {
    color: var(--text-tertiary);
}

.delete-warning,
.delete-item {
    color: var(--text-secondary);
}

.delete-premium-warning {
    color: #F59E0B;
}


/* ==================== FAQ Accordion ==================== */

.faq-item {
    border-color: var(--border-color-light);
}

.faq-question {
    color: var(--text-primary);
}

.faq-chevron {
    color: var(--text-tertiary);
}

.faq-answer p {
    color: var(--text-secondary);
}


/* ==================== Rate App Modal ==================== */

.rate-modal-body {
    color: var(--text-primary);
}

.rate-star svg {
    fill: var(--border-color);
}

.rate-star.active svg {
    fill: var(--gold);
    filter: drop-shadow(0 2px 4px rgba(197, 160, 89, 0.3));
}

[data-theme="dark"] .rate-star.active svg {
    filter: drop-shadow(0 2px 6px rgba(197, 160, 89, 0.5));
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .rate-star.active svg {
        filter: drop-shadow(0 2px 6px rgba(197, 160, 89, 0.5));
    }
}

.rate-star-label {
    color: var(--gold);
}

.rate-feedback-textarea {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.rate-feedback-textarea::placeholder {
    color: var(--text-tertiary);
}

.rate-feedback-textarea:focus {
    border-color: var(--gold);
}


/* ==================== Premium Page ==================== */

.premium-feature,
.premium-feature-item,
.feature-item {
    color: var(--text-primary);
}

.premium-feature svg,
.premium-feature-item svg,
.feature-item svg,
.feature-icon {
    color: var(--gold);
}

.premium-price,
.price-amount,
.price-value {
    color: var(--text-primary);
}

.price-label,
.price-period,
.price-description {
    color: var(--text-secondary);
}

.premium-card:not(.featured),
.premium-container,
.premium-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.premium-terms,
.premium-note,
.terms-note,
.privacy-note {
    color: var(--text-tertiary);
}

.cancel-anytime {
    color: var(--text-secondary);
}

.plan-card {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.plan-card-title,
.plan-card-price {
    color: var(--text-primary);
}

.plan-card-period,
.plan-card-description,
.plan-card-equivalent {
    color: var(--text-secondary);
}

.plan-badge,
.yearly-badge,
.discount-badge {
    background: var(--gold);
    color: #FFFFFF;
}

.free-months-label {
    color: var(--gold);
}

.best-value-label {
    color: var(--gold);
}

.restore-btn,
.restore-link {
    color: var(--text-secondary);
}

.restore-btn:hover,
.restore-link:hover {
    color: var(--gold);
}


/* ======================================================================
   TAILWIND CDN DARK MODE OVERRIDES
   ====================================================================== */

[data-theme="dark"] .text-gray-900 {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .text-gray-800 {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .text-gray-700 {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .text-gray-600 {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .text-gray-500 {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .text-gray-400 {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .bg-gray-100 {
    background-color: var(--bg-tertiary) !important;
}
[data-theme="dark"] .bg-gray-50 {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.12) !important;
}
[data-theme="dark"] .bg-blue-50 {
    background-color: rgba(37, 99, 235, 0.12) !important;
}
[data-theme="dark"] .bg-purple-50 {
    background-color: rgba(147, 51, 234, 0.12) !important;
}
[data-theme="dark"] .bg-teal-50 {
    background-color: rgba(13, 148, 136, 0.12) !important;
}
[data-theme="dark"] .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.12) !important;
}
[data-theme="dark"] .bg-yellow-50 {
    background-color: rgba(234, 179, 8, 0.12) !important;
}

[data-theme="dark"] .text-red-800 {
    color: #FCA5A5 !important;
}
[data-theme="dark"] .text-red-700 {
    color: #FCA5A5 !important;
}
[data-theme="dark"] .text-amber-800 {
    color: #FCD34D !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .text-gray-900 {
        color: var(--text-primary) !important;
    }
    :root:not([data-theme="light"]) .text-gray-800 {
        color: var(--text-primary) !important;
    }
    :root:not([data-theme="light"]) .text-gray-700 {
        color: var(--text-secondary) !important;
    }
    :root:not([data-theme="light"]) .text-gray-600 {
        color: var(--text-secondary) !important;
    }
    :root:not([data-theme="light"]) .text-gray-500 {
        color: var(--text-secondary) !important;
    }
    :root:not([data-theme="light"]) .text-gray-400 {
        color: var(--text-tertiary) !important;
    }

    :root:not([data-theme="light"]) .bg-gray-100 {
        background-color: var(--bg-tertiary) !important;
    }
    :root:not([data-theme="light"]) .bg-gray-50 {
        background-color: var(--bg-secondary) !important;
    }

    :root:not([data-theme="light"]) .bg-red-50 {
        background-color: rgba(239, 68, 68, 0.12) !important;
    }
    :root:not([data-theme="light"]) .bg-blue-50 {
        background-color: rgba(37, 99, 235, 0.12) !important;
    }
    :root:not([data-theme="light"]) .bg-purple-50 {
        background-color: rgba(147, 51, 234, 0.12) !important;
    }
    :root:not([data-theme="light"]) .bg-teal-50 {
        background-color: rgba(13, 148, 136, 0.12) !important;
    }
    :root:not([data-theme="light"]) .bg-amber-50 {
        background-color: rgba(245, 158, 11, 0.12) !important;
    }
    :root:not([data-theme="light"]) .bg-yellow-50 {
        background-color: rgba(234, 179, 8, 0.12) !important;
    }

    :root:not([data-theme="light"]) .text-red-800 {
        color: #FCA5A5 !important;
    }
    :root:not([data-theme="light"]) .text-red-700 {
        color: #FCA5A5 !important;
    }
    :root:not([data-theme="light"]) .text-amber-800 {
        color: #FCD34D !important;
    }
}