[data-theme="light"] {
    --primary-color: #0066cc;
    --secondary-color: #cc0066;
    --accent-color: #cc6600;
    --bg-dark: #f5f5f8;
    --bg-darker: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.9);
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a5e;
    --border-color: rgba(0, 102, 204, 0.3);
    --shadow-glow: 0 0 20px rgba(0, 102, 204, 0.2);
}

[data-theme="light"] .main-header {
    background: linear-gradient(180deg, var(--bg-darker) 0%, transparent 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .visual-card,
[data-theme="light"] .game-panel,
[data-theme="light"] .data-panel,
[data-theme="light"] .audio-panel {
    background: var(--bg-card);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .visual-canvas,
[data-theme="light"] .game-canvas,
[data-theme="light"] .data-canvas,
[data-theme="light"] .audio-canvas {
    background: var(--bg-dark);
}

[data-theme="light"] .piano-key.white {
    background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
    border-color: #ddd;
}

[data-theme="light"] .piano-key.black {
    background: linear-gradient(180deg, #444 0%, #222 100%);
}

[data-theme="light"] .main-footer {
    background: var(--bg-darker);
    border-top-color: var(--border-color);
}

[data-theme="light"] .reaction-area {
    background: #ddd;
}

[data-theme="light"] .glitch {
    animation: none;
}

[data-theme="light"] .glitch::before,
[data-theme="light"] .glitch::after {
    display: none;
}

body {
    transition: background-color var(--transition-medium), color var(--transition-medium);
}

.main-header,
.nav-menu,
.visual-card,
.game-panel,
.data-panel,
.audio-panel,
.main-footer,
.control-btn,
.game-btn,
.data-btn,
.audio-btn {
    transition: all var(--transition-medium);
}