/* Tema Claro */
.light-theme {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --accent-color: #0d6efd;
    --border-color: #dee2e6;
    --shadow-color: rgba(0,0,0,0.1);
    --welcome-bg: #c3e0f0;
}

/* Tema Escuro */
.dark-theme {
    --bg-primary: #212529;
    --bg-secondary: #343a40;
    --text-primary: #f8f9fa;
    --text-secondary: #adb5bd;
    --accent-color: #3d8bfd;
    --border-color: #495057;
    --shadow-color: rgba(0,0,0,0.3);
    --welcome-bg: #2973c9;
}

/* Aplicação das variáveis */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.navbar {
    background-color: var(--bg-secondary);
}

.menu-toggle span {
    background-color: var(--text-primary);
}

.nav-menu a {
    color: var(--text-primary);
}

.nav-menu a:hover {
    background-color: var(--accent-color);
    color: var(--bg-primary);
}

.tool-container {
    background-color: var(--bg-secondary);
    box-shadow: 0 2px 10px var(--shadow-color);
}

textarea {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

textarea:focus {
    border-color: var(--accent-color);
    outline: none;
}

.action-button {
    background-color: var(--accent-color);
    color: var(--bg-primary);
}

.action-button:hover {
    opacity: 0.9;
}

.stat-box {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.instructions {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.ad-space {
    background-color: var(--bg-secondary);
    border: 1px dashed var(--border-color);
}

#themeToggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.5rem;
}

#languageSelect {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.3rem;
    border-radius: 4px;
    cursor: pointer;
}

/* Tema escuro para o select */
.dark-theme #languageSelect {
    background-color: var(--bg-secondary);
}