/* assets/css/theme.css */

/* Light Theme Variables */
.light-theme {
    --bg-color: #f0f5fa;
    --bg-gradient: linear-gradient(135deg, #f0f5fa, #e0eaf5);
    --text-color: #333344;
    --text-color-light: #555566;
    --accent-color: #4d84ff;
    --accent-hover: #3a70e3;
    --error-color: #ff4d4d;
    --success-color: #4ddb79;
    --border-color: rgba(0, 0, 0, 0.05);
    --shadow-color: rgba(0, 0, 0, 0.05);
    --panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    --progress-fill: rgba(77, 132, 255, 0.8);
}

/* Dark Theme Variables */
.dark-theme {
    --bg-color: #121620;
    --bg-gradient: linear-gradient(135deg, #121620, #1a1f2e);
    --text-color: #f1f3f9;
    --text-color-light: #c5c8d0;
    --accent-color: #6595ff;
    --accent-hover: #5080ff;
    --error-color: #ff6b6b;
    --success-color: #5be892;
    --border-color: rgba(255, 255, 255, 0.07);
    --shadow-color: rgba(0, 0, 0, 0.25);
    --panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    --progress-fill: rgba(101, 149, 255, 0.8);
}

/* Base Theme Styles */
body {
    background: var(--bg-gradient);
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
}

p, span, label {
    color: var(--text-color-light);
}

a {
    color: var(--accent-color);
}

a:hover {
    color: var(--accent-hover);
}

.primary-btn {
    background-color: var(--accent-color);
    color: white;
}

.primary-btn:hover {
    background-color: var(--accent-hover);
}

.secondary-btn {
    background-color: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.secondary-btn:hover {
    background-color: rgba(var(--accent-color), 0.1);
}

.control-btn {
    background-color: transparent;
    color: var(--text-color-light);
    border: 1px solid var(--border-color);
}

.control-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.dark-theme .control-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Input Fields Theming */
.input-group i {
    color: var(--text-color-light);
}

/* Navigation Theming */
.nav-links a {
    color: var(--text-color-light);
}

.nav-links a:hover {
    color: var(--text-color);
}

.nav-links a.active {
    color: var(--accent-color);
}

/* Voice Item Theming */
.voice-item .voice-info h4 {
    color: var(--text-color);
}

.voice-item .voice-info span {
    color: var(--text-color-light);
}

.voice-item.selected .voice-info h4 {
    color: var(--accent-color);
}

/* Audio Controls Theming */
.play-sample i,
.history-play i,
.audio-btn i {
    color: var(--text-color);
}

.progress-fill {
    background-color: var(--progress-fill);
}

/* History Item Theming */
.history-title {
    color: var(--text-color);
}

/* Theme Toggle Styling */
.light-theme #theme-switch .fa-moon {
    display: block;
    color: #121620;
}

.light-theme #theme-switch .fa-sun {
    display: none;
}

.dark-theme #theme-switch .fa-moon {
    display: none;
}

.dark-theme #theme-switch .fa-sun {
    display: block;
    color: #ffd700;
}

/* Text Selection Theming */
::selection {
    background: var(--accent-color);
    color: white;
}

/* Dark theme adjustments */
.dark-theme .selected-voice,
.dark-theme .voice-settings {
    background: rgba(30, 30, 50, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}