:root {
    --bg: #FFFFFF;
    --surface: #F5F5F5;
    --surface-2: #EBEBEB;
    --border: #E0E0E0;
    --text-muted: #6B6B6B;
    --text: #0A0A0A;
    --primary: #0A0A0A;
    --on-primary: #FFFFFF;
    color-scheme: light;
}

/* Segue o sistema do usuário, a menos que ele escolha manualmente */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0A0A0A;
        --surface: #141414;
        --surface-2: #1F1F1F;
        --border: #2E2E2E;
        --text-muted: #A3A3A3;
        --text: #FAFAFA;
        --primary: #FFFFFF;
        --on-primary: #0A0A0A;
        color-scheme: dark;
    }
}

/* Escolha manual via botão de tema */
:root[data-theme="dark"] {
    --bg: #0A0A0A;
    --surface: #141414;
    --surface-2: #1F1F1F;
    --border: #2E2E2E;
    --text-muted: #A3A3A3;
    --text: #FAFAFA;
    --primary: #FFFFFF;
    --on-primary: #0A0A0A;
    color-scheme: dark;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    transition: background-color .2s ease, color .2s ease;
}

section[id] {
    scroll-margin-top: 5rem;
}

/* Ícone do botão de tema: mostra a lua no light e o sol no dark */
.icon-sun {
    display: none;
}

.icon-moon {
    display: block;
}

:root[data-theme="dark"] .icon-sun {
    display: block;
}

:root[data-theme="dark"] .icon-moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .icon-sun {
        display: block;
    }

    :root:not([data-theme="light"]) .icon-moon {
        display: none;
    }
}