/* theme.css - Refined Soft Light Mode */

html.light-theme body {
    background-color: #f6f8fa;
    color: #24292f;
    background-image: radial-gradient(#d0d7de 1px, transparent 1px);
}

/* Fix header in practice.html */
html.light-theme .sticky-header {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid #d0d7de !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Background overrides */
html.light-theme .bg-slate-900\/80 {
    background-color: rgba(246, 248, 250, 0.9) !important;
}

html.light-theme .bg-slate-900\/50 {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

html.light-theme .bg-slate-900 {
    background-color: #f6f8fa !important;
}

html.light-theme .bg-slate-800 {
    background-color: #ffffff !important;
}

html.light-theme .bg-slate-800\/50 {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

html.light-theme .bg-slate-700 {
    background-color: #f3f4f6 !important;
}

html.light-theme .bg-slate-700\/50 {
    background-color: rgba(243, 244, 246, 0.8) !important;
}

html.light-theme .hover\:bg-slate-700:hover {
    background-color: #e5e7eb !important;
}

html.light-theme .bg-slate-600 {
    background-color: #e5e7eb !important;
}

html.light-theme .hover\:bg-slate-600:hover {
    background-color: #d1d5db !important;
}

html.light-theme .disabled\:bg-slate-600:disabled {
    background-color: #d1d5db !important;
}

/* Text colors */
html.light-theme .text-white {
    color: #24292f !important;
}

html.light-theme .text-slate-200 {
    color: #374151 !important;
}

html.light-theme .text-slate-300 {
    color: #4b5563 !important;
}

html.light-theme .text-slate-400 {
    color: #6b7280 !important;
}

html.light-theme .text-slate-500 {
    color: #9ca3af !important;
}

/* Borders */
html.light-theme .border-slate-800 {
    border-color: #e5e7eb !important;
}

html.light-theme .border-slate-700 {
    border-color: #d1d5db !important;
}

html.light-theme .border-slate-600 {
    border-color: #9ca3af !important;
}

/* Fix text shadow for pixel font to prevent double-image effect */
html.light-theme .pixel-font {
    text-shadow: 4px 4px 0px #e2e8f0 !important;
}

/* Cards & Options */
html.light-theme .card {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

html.light-theme .card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;
    border-color: #0ea5e9 !important;
}

html.light-theme .option-label {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}

html.light-theme .option-label:hover:not(.correct-answer):not(.wrong-answer):not(.missed-answer) {
    border-color: #0ea5e9 !important;
    background-color: #f8fafc !important;
}

html.light-theme .peer:checked+.option-label {
    background-color: #f0f9ff !important;
    border-color: #0ea5e9 !important;
    color: #0c4a6e !important;
}

/* Fix shadows and other specific components */
html.light-theme #stats-modal .bg-slate-800,
html.light-theme #login-modal .bg-slate-800,
html.light-theme #api-key-modal .bg-slate-800 {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
    background-color: #ffffff !important;
}

html.light-theme input {
    background-color: #ffffff !important;
    color: #24292f !important;
    border-color: #d1d5db !important;
}

html.light-theme input::placeholder {
    color: #9ca3af !important;
}

/* Light mode overrides for active buttons so they pop properly */
html.light-theme .active-btn {
    background-color: #0ea5e9 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

/* Special fix for the favorite button hover */
html.light-theme .hover\:bg-yellow-900\/60:hover {
    background-color: #fef08a !important;
}

html.light-theme .bg-yellow-900\/40 {
    background-color: #fef9c3 !important;
    border-color: #fde047 !important;
    color: #ca8a04 !important;
}

/* Modals / Overlays base */
html.light-theme #login-modal,
html.light-theme #stats-modal,
html.light-theme #api-key-modal {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

/* Toggle switch fix for light mode */
html.light-theme .peer + div {
    background-color: #cbd5e1 !important;
}

html.light-theme .peer:checked + div {
    background-color: #0891b2 !important;
}