/**
 * Dark Mode Styles
 */

body.dark-mode {
    /* Cores Dark Mode */
    --bg: #1A202C;
    --surface: #2D3748;
    --text: #F7FAFC;
    --text-secondary: #CBD5E0;
    --border: #4A5568;

    /* Sombras Dark Mode */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5), 0 10px 10px rgba(0, 0, 0, 0.2);
}

/* Header Dark Mode */
body.dark-mode .header {
    background: rgba(45, 55, 72, 0.95);
    border-bottom-color: var(--border);
}

/* Hero Dark Mode */
body.dark-mode .hero {
    background: linear-gradient(135deg, var(--bg) 0%, #2D3748 100%);
}

/* Sobre Dark Mode */
body.dark-mode .sobre {
    background: var(--surface);
}

body.dark-mode .stat {
    background: var(--bg);
}

/* Skills Dark Mode */
body.dark-mode .skill-card {
    background: var(--surface);
}

/* Projetos Dark Mode */
body.dark-mode .projetos {
    background: var(--surface);
}

body.dark-mode .project-card {
    background: var(--bg);
}

body.dark-mode .project-tech span {
    background: var(--surface);
}

/* Motos - já é dark por padrão */

/* Blog Dark Mode */
body.dark-mode .blog {
    background: var(--surface);
}

/* Contato Dark Mode */
body.dark-mode .contato-form {
    background: var(--surface);
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea {
    background: var(--bg);
    color: var(--text);
    border-color: var(--border);
}

/* Botões Dark Mode */
body.dark-mode .btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

body.dark-mode .btn-secondary:hover {
    border-color: var(--primary);
}

body.dark-mode .btn-icon {
    background: var(--bg);
}

/* Footer Dark Mode */
body.dark-mode .footer {
    background: #0F1218;
    /* Mais escuro que o fundo */
    border-top: 1px solid var(--border);
}

/* Transições suaves */
body {
    transition: background-color var(--transition-base), color var(--transition-base);
}

.header,
.hero,
.section,
.card,
.btn,
.form-group input,
.form-group textarea {
    transition: background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
}