/* Default (light) mode variables */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --button-bg: #4CAF50;
    --button-text: #ffffff;
    --container-bg: #f2f2f2;

    /* index.html 專用顏色*/
    --label-active-bg: #50AF7B;
    --label-active-text: #1b1b1b;
    --label-unactive-bg: #D9EAF0;

    /* cs_exam_small.html 專用顏色*/
    --question-text: #000000;
    --radio-checked-text: #000000;
    --radio-unchecked-text: #000000;
    --radio-disabled-text: #666666;

    --radio-checked-bg: #add8e6;
    --radio-unchecked-bg: #F2CFEE;
    --radio-disabled-bg: #c5c3c5;


    --button-purple-bg: #732d91;
    --button-purple-text: var(--button-text);
    --button-green-bg: #27ae60;
    --button-green-text: var(--button-text);
    --score-text: #0000ff;

    --popup-bg: #f2f2f2;
    --popup-text: #1b1b1b;


    /* 讀取條顏色 */
    --progress-bar: #FC00E7;

}

/* Dark mode variables applied when the .dark-mode class is present on the body */
body.dark_mode {
    --bg-color: #121212;
    --text-color: #f5f5f5;
    --button-bg: #353f36;
    --button-text: #BA82C2;
    --container-bg: #2b2b2b;

    /* index.html 專用顏色*/
    --label-active-bg: #57626D;
    --label-active-text: #ffd700;
    --label-unactive-bg: #222222;

    /* cs_exam_small.html 專用顏色*/
    --question-text: #f5f5f5;
    /*題目顏色(第一題、第二題...)*/
    --radio-checked-text: #00ADE7;
    --radio-unchecked-text: #f5f5f5;
    --radio-disabled-text: #686868;

    --radio-checked-bg: #000000;
    --radio-unchecked-bg: #1f1f1f;
    --radio-disabled-bg: #161616;

    --button-purple-bg: #263130;
    --button-purple-text: #7BF707;
    --button-green-bg: #263130;
    --button-green-text: #7BF707;
    --score-text: #7BF707;
    --popup-bg: #353f36;
    --popup-text: #f5f5f5;
    
    --progress-bar: #00ffff;
}

/* Apply variables to elements and add smooth transitions */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

#theme-toggle {
    padding: 10px 15px;
    border-radius: 8px;
    border: none;
    background-color: var(--button-bg);
    color: var(--button-text);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#theme-toggle:hover {
    opacity: 0.8;
}