/* ===============================
   LIGHT THEME (DEFAULT)
   =============================== */
:root[data-theme="light"] {
    /* Primary Brand Colors */
    --primary-color: #2E7D32;
    /* Dark Green */
    --primary-hover: #1b5e20;
    --secondary-color: #81c784;
    /* Light Green */
    --accent-color: #ffca28;
    /* Amber for highlights */

    /* Backgrounds */
    --bg-color: #f7f9f7;
    /* Very light transparent green tint */
    --bg-primary: var(--bg-color);
    /* Alias */
    --section-bg: #ffffff;
    --section-alt-bg: #e0f7fa;
    /* Light Cyan */

    /* Text Colors */
    --text-color: #333333;
    --text-primary: var(--text-color);
    /* Alias */
    --text-secondary: #555555;
    --heading-color: #1b5e20;
    /* Deep Green for headings */
    --text-light: #ffffff;

    /* Components */
    --navbar-bg: #2E7D32;
    --navbar-text: #ffffff;
    --navbar-hover: #a5d6a7;

    --card-bg: #ffffff;
    --card-text: #444444;
    --card-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    --card-radius: 16px;

    --footer-bg: #1b5e20;
    /* Deep Dark Green */
    --footer-text: #ffffff;
    --footer-link: #c8e6c9;
    --footer-link-hover: #ffffff;

    /* Buttons */
    --btn-primary-bg: #2E7D32;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: #2E7D32;

    /* Quiz Section */
    --quiz-bg: #e8f5e9;
    /* Light Green */
    --quiz-text: #2e7d32;
    --quiz-btn-bg: #ff9800;
    /* Vibrant Orange */
    --quiz-btn-hover: #f57c00;

    /* Inputs */
    --input-bg: #ffffff;
    --input-border: #e0e0e0;
    --input-text: #333333;
    --input-radius: 12px;

    --border-color: #e0e0e0;

    --report-btn-bg: #d32f2f;
    --report-btn-hover: #b71c1c;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #2E7D32 0%, #66bb6a 100%);
    --gradient-hero: linear-gradient(135deg, #1b5e20 0%, #2E7D32 100%);
}


:root[data-theme="dark"] {
    /* Dark Theme */
    --bg-color: #121212;
    --bg-primary: var(--bg-color);
    /* Alias for compatibility */
    --section-bg: #1e1e1e;
    --section-alt-bg: #1a1a1a;

    --text-color: #e0e0e0;
    --text-primary: var(--text-color);
    /* Alias for compatibility */
    --text-secondary: #bbbbbb;
    --heading-color: #81c784;
    /* Lighter green for headers */

    --navbar-bg: #0d2e14;
    /* Very Dark Green */
    --navbar-text: #e0e0e0;
    --navbar-hover: #4caf50;

    --card-bg: #1e1e1e;
    --card-text: #cccccc;
    --card-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);

    --footer-bg: #0a200f;
    --footer-text: #d1d5db;
    --footer-link: #81c784;
    --footer-link-hover: #ffffff;

    --btn-primary-bg: #2e7d32;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #2d2d2d;
    --btn-secondary-text: #81c784;

    --quiz-bg: #1b3320;
    --quiz-text: #a5d6a7;
    --quiz-btn-bg: #ff9800;
    --quiz-btn-hover: #ffa726;

    --input-bg: #2d2d2d;
    --input-border: #444444;
    --input-text: #e0e0e0;

    --border-color: #444444;

    --report-btn-bg: #e53935;
    --report-btn-hover: #c62828;

    --gradient-primary: linear-gradient(135deg, #1b5e20 0%, #388e3c 100%);
}

/* ===== SMOOTH THEME TRANSITIONS ===== */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
    transition:
        background-color 0.4s ease,
        border-color 0.4s ease,
        color 0.4s ease,
        fill 0.4s ease,
        box-shadow 0.4s ease !important;
}