:root {
    --bg-color: #f0f2f5;
    --text-color: #333;
    --header-bg: #ffffff;
    --card-bg: #ffffff;
    --card-shadow: rgba(0, 0, 0, 0.05);
    --footer-bg: #ffffff;
    --footer-border: #f0f0f0;
    --card-text: #444;
    --select-trigger-bg: #fff;
    --select-trigger-border: #e0e0e0;
    --select-trigger-text: #555;
    --accent-color: #d32f2f;
    --theme-transition: all 0.3s ease;
}

/* Theme variable mapping to bridge v2 themes with v1 styles */
[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-color: var(--bg-primary);
    --text-color: var(--text-primary);
    --header-bg: var(--bg-header);
    --card-bg: var(--bg-card);
    --card-shadow: var(--shadow-color);
    --footer-bg: var(--bg-header);
    --footer-border: var(--border-color);
    --card-text: var(--text-primary);
    --select-trigger-bg: var(--bg-secondary);
    --select-trigger-border: var(--border-color);
    --select-trigger-text: var(--text-secondary);
    --accent-color: var(--accent-primary);
}

[data-theme="dark"] {
    --bg-color: #1a1d21;
    /* Slightly lighter than before #0f1114 */
    --text-color: #e0e0e0;
    --header-bg: #24282d;
    /* Slightly lighter than before #1a1d21 */
    --card-bg: #24282d;
    --card-shadow: rgba(0, 0, 0, 0.5);
    --footer-bg: #24282d;
    --footer-border: #333942;
    --card-text: #ccc;
    --select-trigger-bg: #2d3239;
    --select-trigger-border: #444b55;
    --select-trigger-text: #ddd;
    --accent-color: #ff5252;
}

/* Base Transition for elements using themes */
body,
header,
.game-card,
.card-footer,
.select-trigger,
#searchInput,
#footer {
    transition: var(--theme-transition);
}