:root {
    /* Light Mode (Default) */
    --bg-gradient-start: #f0f2f5;
    --bg-gradient-end: #e2e8f0;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.1);
    --blur-val: blur(16px);
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --card-bg: rgba(255, 255, 255, 0.8);
    --card-border: rgba(0, 0, 0, 0.1);
    --button-bg: #5a67d8;
    --button-text: #ffffff;
    --button-hover: #4c51bf;
    --correct: #4ade80;
    --incorrect: #f87171;
}

/* Dark Mode Overrides */
html.dark-mode {
    --bg-gradient-start: #101020;
    --bg-gradient-end: #151520;
    --glass-bg: rgba(46, 47, 55, 0.7);
    --glass-border: rgba(230, 235, 255, 0.2);
    --text-primary: #e0e0fa;
    --text-secondary: #e0e0fad0;
    --card-bg: rgba(46, 47, 55, 0.7);
    --card-border: rgba(230, 235, 255, 0.25);
    --button-bg: #b0b0e0;
    --button-text: #3a3a5a;
    --button-hover: #c0c0f0;
}

/* Glass Effect Toggle */
html.no-glass {
    --blur-val: none;
    --glass-bg: #ffffff;
    --card-bg: #ffffff;
}

html.dark-mode.no-glass {
    --glass-bg: #242430;
    --card-bg: #242430;
}