/* theme-switcher.css */

/* -----------------------------------------------------
 * VARIÁVEIS DO BOTÃO (não invertidas)
 * --------------------------------------------------- */
:root {
    --bg-color: #f0f0f0; /* Botão claro */
    --text-color: #333333;
}

.dark-mode {
    --bg-color: #333333; /* Botão escuro */
    --text-color: #ffffff;
}

/* -----------------------------------------------------
 * MODO ESCURO (PADRÃO)
 * NÃO INVERTE NADA
 * --------------------------------------------------- */
.dark-mode {
    filter: none !important;
}

/* -----------------------------------------------------
 * MODO CLARO (INVERTE TUDO)
 * Preto vira branco / branco vira preto
 * --------------------------------------------------- */
.light-mode {
    filter: invert(1) hue-rotate(180deg);
}

/* -----------------------------------------------------
 * ITENS A SEREM DESINVERTIDOS NO MODO CLARO
 * Para imagens, vídeos, canvas e elementos marcados
 * com .dinamicstyle-exclude
 * --------------------------------------------------- */
.light-mode img,
.light-mode video,
.light-mode canvas,
.light-mode .dinamicstyle-exclude {
    filter: invert(1) hue-rotate(180deg);
}

/* -----------------------------------------------------
 * ESTILO DO BOTÃO
 * --------------------------------------------------- */
#theme-toggle-button {
    background-color: var(--bg-color);
    color: var(--text-color);
    z-index: 3500 !important;
}