/* Theme System Styles */

/* Light Theme */
body.theme-light {
    background: #f5f5f5;
    color: #333;
}

body.theme-light #sidebar {
    background: #ffffff;
    border-right: 1px solid #e0e0e0;
}

body.theme-light .atom-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    color: #333;
}

body.theme-light .atom-card:hover {
    background: #f9f9f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body.theme-light button {
    background: #667eea;
    color: white;
}

body.theme-light button:hover {
    background: #5568d3;
}

body.theme-light input, 
body.theme-light textarea, 
body.theme-light select {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    color: #333;
}

body.theme-light #settings-panel {
    background: #ffffff;
}

body.theme-light .tab-content {
    background: #f9f9f9;
}

/* Dark Theme (Default) */
body.theme-dark {
    background: #0a0a0a;
    color: #e0e0e0;
}

body.theme-dark #sidebar {
    background: #1a1a1a;
}

body.theme-dark .atom-card {
    background: #2a2a2a;
    color: #e0e0e0;
}

/* Solarized Dark Theme */
body.theme-solarized-dark {
    background: #002b36;
    color: #839496;
}

body.theme-solarized-dark #sidebar {
    background: #073642;
}

body.theme-solarized-dark .atom-card {
    background: #073642;
    color: #93a1a1;
    border: 1px solid #586e75;
}

body.theme-solarized-dark button {
    background: #268bd2;
    color: #fdf6e3;
}

body.theme-solarized-dark button:hover {
    background: #2aa198;
}

/* Nord Theme */
body.theme-nord {
    background: #2e3440;
    color: #eceff4;
}

body.theme-nord #sidebar {
    background: #3b4252;
}

body.theme-nord .atom-card {
    background: #3b4252;
    color: #eceff4;
    border: 1px solid #4c566a;
}

body.theme-nord button {
    background: #5e81ac;
    color: #eceff4;
}

body.theme-nord button:hover {
    background: #81a1c1;
}

/* Monokai Theme */
body.theme-monokai {
    background: #272822;
    color: #f8f8f2;
}

body.theme-monokai #sidebar {
    background: #1e1f1c;
}

body.theme-monokai .atom-card {
    background: #3e3d32;
    color: #f8f8f2;
    border: 1px solid #75715e;
}

body.theme-monokai button {
    background: #a6e22e;
    color: #272822;
}

body.theme-monokai button:hover {
    background: #66d9ef;
}

/* Dracula Theme */
body.theme-dracula {
    background: #282a36;
    color: #f8f8f2;
}

body.theme-dracula #sidebar {
    background: #21222c;
}

body.theme-dracula .atom-card {
    background: #44475a;
    color: #f8f8f2;
    border: 1px solid #6272a4;
}

body.theme-dracula button {
    background: #bd93f9;
    color: #282a36;
}

body.theme-dracula button:hover {
    background: #ff79c6;
}

/* Custom accent colors */
body[data-accent="blue"] button {
    background: #667eea;
}

body[data-accent="green"] button {
    background: #10b981;
}

body[data-accent="purple"] button {
    background: #8b5cf6;
}

body[data-accent="pink"] button {
    background: #ec4899;
}

body[data-accent="orange"] button {
    background: #f97316;
}

body[data-accent="teal"] button {
    background: #14b8a6;
}

/* Theme transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

#sidebar, .atom-card, button, input, textarea, select {
    transition: all 0.3s ease;
}

/* Atom colors in 3D remain consistent across themes */
/* Atom sphere colors are set programmatically based on labels */