:root {
    /* --- PALETA DE CORES (Seus valores originais) --- */
    --black: #000000;
    --gray: #777777;
    --prata: #c0c0c0;
    --white: #FFFFFF;
    --indigo: #410096;
    --bright-lavander: #c396ff;
    --eletric-indigo: #6F00FF;
    /* Fixo nos dois temas (sem override em [data-theme="dark"]) — para FUNDO solido
       de botoes/badges/chips com texto claro. --eletric-indigo sozinho clareia no
       escuro (#6F00FF -> #9D4EDD) porque foi pensado pra uso como cor de TEXTO/icone
       de destaque sobre a pagina escura; usado como fundo, esse clareamento reduz o
       contraste com texto branco (~6.7:1 no claro cai pra ~4.2:1 no escuro). Fundo
       solido nao precisa clarear — o texto branco em cima ja resolve a leitura nos
       dois temas com a mesma cor de base. */
    --eletric-indigo-solid: #6F00FF;
    --lavander-veil: #efe3ff;
    --alabaster-gray: #E9E9E9;
    --lavender-mist: #FBF7FF;
    --gradient-indigo: linear-gradient(45deg, #6F00FF, #C396FF);
    --dark-inverse: invert(0);
    --gradient-purple: linear-gradient(106deg, #4e05b6 0%, #7a0dff 52%, #5b09db 100%);
}

/* --- FALLBACK sem JS (theme-init.js normalmente já escreve data-theme com
   o valor resolvido antes do paint, inclusive em modo automático). Esse
   bloco só entra em ação se o script estiver bloqueado/desabilitado — cobre
   apenas as variáveis de cor base. NÃO é o lugar para novas regras de dark
   mode: use só `[data-theme="dark"] seletor {...}`, que já funciona em
   qualquer preferência (inclusive "Automático") porque o JS sempre grava o
   atributo resolvido. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --white: #121212;
        --prata: #474747;
        --lavender-mist: #1e1e1e;
        --lavander-veil: #4a4550;
        --alabaster-gray: #333333;

        --black: #F1F1F1;
        --gray: #AAAAAA;

        --indigo: #C396FF;
        --eletric-indigo: #9D4EDD;

        --gradient-indigo: linear-gradient(45deg, #9D4EDD, #6F00FF);

        --bg-color: #121212;
        --text-color: #F1F1F1;
        --navbar-bg: #1e1e1e;
        --card-bg: #252525;
        --accent-color: var(--bright-lavander);
        --input-bg: #333333;
        --dark-inverse: invert(1);
        --gradient-purple: linear-gradient(106deg, #4e05b6 0%, #7a0dff 52%, #5b09db 100%);
    }
}

/* --- VARIÁVEIS FUNCIONAIS (Tema Escuro) --- */
[data-theme="dark"] {
    /* O que era branco/claro agora é escuro */
    --white: #121212;
    --prata: #474747;
    --lavender-mist: #1e1e1e;
    --lavander-veil: #4a4550;
    --alabaster-gray: #333333;

    /* O que era preto/escuro agora é claro */
    --black: #F1F1F1;
    --gray: #AAAAAA;

    /* Ajuste de destaque para o Indigo (roxo mais claro para leitura) */
    --indigo: #C396FF;
    --eletric-indigo: #9D4EDD;

    /* Mantém ou inverte o gradiente para tons que saltam no fundo escuro */
    --gradient-indigo: linear-gradient(45deg, #9D4EDD, #6F00FF);

    /* Suas variáveis funcionais antigas (caso queira mantê-las como backup) */
    --bg-color: #121212;
    --text-color: #F1F1F1;
    --navbar-bg: #1e1e1e;
    --card-bg: #252525;
    --accent-color: var(--bright-lavander);
    --input-bg: #333333;
    --dark-inverse: invert(1);
    --gradient-purple: linear-gradient(106deg, #4e05b6 0%, #7a0dff 52%, #5b09db 100%);
}