/* Temas do Catnip (src/js/components/temas-catnip.js).

   Nada aqui age sem `data-tema` na raiz: quem nao assina, ou nao escolheu,
   ve exatamente o base.css. O JS so' entrega duas variaveis -- `--tema-base`
   (o tom chapado) e `--tema-gradiente` -- e tudo o mais sai delas.

   Duas camadas:
     1. Tokens. As superficies chapadas (cartao, campo, menu, modal, tile) sao
        re-derivadas da base com color-mix, entao continuam opacas: um menu
        por cima do chat nao deixa o chat vazar.
     2. Veu. So' as colunas do app (trilho, canais, conteudo, membros) ficam
        translucidas, para o gradiente do body atravessar o app inteiro, como
        um papel de parede. Gaveta (coluna que vira overlay em tela estreita)
        volta a ser chapada.

   O verde continua o verde da marca: tema troca o papel, nao o significado
   de "ao vivo". No claro ele escurece, porque #4AEC7D sobre papel claro some.

   Carrega depois das folhas da pagina. */

:root[data-tema] {
  --color-background: var(--tema-base);
  --color-card: color-mix(in srgb, var(--tema-base) 90%, #fff);
  --color-muted: var(--color-card);
  --color-elevado: color-mix(in srgb, var(--tema-base) 82%, #fff);
  --color-sidebar: color-mix(in srgb, var(--tema-base) 82%, #000);
  --noite: color-mix(in srgb, var(--tema-base) 58%, #000);
  --control-bg-hover: color-mix(in srgb, var(--tema-base) 66%, #000);
  --color-tile: var(--color-card);
  --color-tile-hover: var(--color-elevado);
  --color-bar: color-mix(in srgb, var(--noite) 94%, transparent);

  --tema-veu-forte: rgb(0 0 0 / 0.34);
  --tema-veu: rgb(0 0 0 / 0.2);
  --tema-veu-leve: rgb(0 0 0 / 0.08);
}

:root[data-tema-modo='claro'] {
  color-scheme: light;

  --tinta: #1E1A24;
  --tinta-70: rgba(30, 26, 36, 0.72);
  --tinta-45: rgba(30, 26, 36, 0.5);
  --tinta-15: rgba(30, 26, 36, 0.14);
  --regra: rgba(30, 26, 36, 0.26);
  --verde: #158A3E;
  --roxo: #6A4FD0;

  --color-card: color-mix(in srgb, var(--tema-base) 55%, #fff);
  --color-elevado: #fff;
  --color-sidebar: color-mix(in srgb, var(--tema-base) 92%, #000);
  --noite: color-mix(in srgb, var(--tema-base) 35%, #fff);
  --control-bg-hover: color-mix(in srgb, var(--tema-base) 70%, #fff);
  --control-ring: rgba(106, 79, 208, 0.3);
  --color-secondary: rgba(30, 26, 36, 0.07);
  --color-secondary-hover: rgba(30, 26, 36, 0.12);
  --color-accent-hover: #117635;
  --color-on-accent: #fff;
  --color-divisa: rgba(30, 26, 36, 0.08);
  --color-sidebar-hover: rgba(30, 26, 36, 0.07);
  --color-destructive: #D33A3A;
  --color-destructive-hover: #B82E2E;
  --color-warning: #B7791F;
  --status-ausente: #C98A12;
  --status-ocupado: #D33A3A;
  --status-offline: rgba(30, 26, 36, 0.4);

  --tema-veu-forte: rgb(255 255 255 / 0.2);
  --tema-veu: rgb(255 255 255 / 0.3);
  --tema-veu-leve: rgb(255 255 255 / 0.42);
}

:root[data-tema] body {
  background: var(--tema-base) var(--tema-gradiente) fixed;
}

:root[data-tema] .rail,
:root[data-tema] .painel-usuario {
  background: var(--tema-veu-forte);
}

:root[data-tema] .coluna-canais,
:root[data-tema] .coluna-membros {
  background: var(--tema-veu);
}

:root[data-tema] .coluna-conteudo,
:root[data-tema] .pagina-frame {
  background: var(--tema-veu-leve);
}

@media (max-width: 1100px) {
  :root[data-tema] .coluna-membros {
    background: var(--color-sidebar);
  }
}

@media (max-width: 640px) {
  :root[data-tema] .coluna-canais {
    background: var(--color-sidebar);
  }
}