/* Tokens compartilhados por TODAS as páginas (index/app.css, admin.css, login.css,
   reset-password.css). Precisa estar linkado ANTES do CSS de cada página — o CSS
   da página só usa var(--...), nunca redeclara essas variáveis.

   Identidade visual ttable (ttable.com.br): azul #4C8DFF, ciano #36F1CD e o
   navy #060B1A; Space Grotesk nos títulos, Inter no texto e JetBrains Mono nos
   rótulos curtos. No tema claro, a cor da organização (Admin → Identidade)
   sobrescreve --azul e o topo; o tema escuro é o da plataforma, igual para todos. */
:root {
    /* Controles nativos (checkbox, select, calendário do input date, barra de
       rolagem) acompanham o tema. */
    color-scheme: light;

    /* --- Marca ttable: constantes, iguais nos dois temas. A página do link
       compartilhado (sem alternância de tema) é sempre escura, como o site. --- */
    --ttable-fundo: #060b1a;
    --ttable-fundo-2: #0c1735;
    --ttable-superficie: rgba(255, 255, 255, 0.035);
    --ttable-linha: rgba(148, 170, 230, 0.14);
    --ttable-linha-forte: rgba(148, 170, 230, 0.28);
    --ttable-texto: #e8eeff;
    --ttable-muted: #8e9bc0;
    --ttable-azul: #4c8dff;
    --ttable-ciano: #36f1cd;
    --ttable-violeta: #9b7bff;
    --ttable-ambar: #ffb547;
    --ttable-rosa: #ff6b8b;
    --ttable-brilho-azul: rgba(76, 141, 255, 0.24);
    --ttable-brilho-ciano: rgba(54, 241, 205, 0.12);

    /* --- Botão de conversas (chat.css): verde do WhatsApp, constante nos dois
       temas para se destacar do resto da interface. --- */
    --whatsapp: #25d366;
    --whatsapp-escuro: #128c7e;
    --sobre-whatsapp: #ffffff;

    /* --- Paleta "auth" (admin/login/reset-password) --- */
    --azul: #2f6be0;
    --azul-escuro: #1f4692;
    --azul-forte: #1f4692;
    --azul-nevoa: #eaf1ff;
    --nevoa-texto: #1e3a78;
    --borda: #d5deef;
    --texto: #0b1430;
    --muted: #56627f;
    --label: #2b3857;
    --erro: #b42318;
    --erro-bg: #fdecea;
    --erro-borda: #f5c6c6;
    --ok: #0f7b5f;
    --ok-bg: #ddf8f0;
    --alerta-bg: #fff3cd;
    --alerta-texto: #856404;
    --link-hover-bg: #dce7fc;
    /* Acento ciano da marca (o "." do ttable) sobre as superfícies do tema:
       mais fechado no claro para não sumir no branco. Decorativo, não é texto. */
    --ciano: #12b89a;
    /* Ciano para TEXTO (links): o --ciano claro fica em 2,5:1 no branco. */
    --ciano-texto: #0a7a64;

    /* Painel de marca do login: acompanha o tema — claro no claro, navy no
       escuro — para não destoar do formulário ao lado. */
    --painel-ttable-fundo: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
    --painel-ttable-borda: var(--borda);
    --painel-ttable-linha: rgba(47, 107, 224, 0.1);
    --painel-ttable-superficie: rgba(47, 107, 224, 0.035);
    --painel-ttable-brilho-azul: rgba(76, 141, 255, 0.14);
    --painel-ttable-brilho-ciano: rgba(54, 241, 205, 0.14);

    /* Texto/ícone POR CIMA de um fundo --azul chapado (botão primário, aba ativa,
       chip selecionado). No tema escuro --azul é claro, então branco sobre ele
       fica ilegível — este token inverte junto. */
    --sobre-azul: #ffffff;
    /* Faixa superior das páginas: no claro acompanha o azul da marca; no escuro
       precisa de um azul PROFUNDO próprio, senão o branco do título cai sobre o
       --azul clareado do tema e perde contraste. */
    --topo-grad-1: #2f6be0;
    --topo-grad-2: #1f4692;
    /* Grade fina sobre o topo — a "tabela" do ttable. Translúcida para funcionar
       sobre qualquer cor de organização. */
    --topo-grade: rgba(255, 255, 255, 0.07);
    /* Grade de fundo das telas de acesso (login, redefinir senha). */
    --grade: rgba(47, 107, 224, 0.07);
    /* Realce sutil de hover sobre superfícies (linhas de lista, cabeçalhos
       clicáveis): escurece no claro, clareia no escuro. */
    --hover-sutil: rgba(47, 107, 224, 0.06);

    --fundo: #f3f6fc;
    --fundo-gradiente:
        radial-gradient(ellipse 70% 55% at 0% 0%, rgba(76, 141, 255, 0.2) 0%, rgba(76, 141, 255, 0) 70%),
        radial-gradient(ellipse 55% 45% at 100% 8%, rgba(54, 241, 205, 0.14) 0%, rgba(54, 241, 205, 0) 70%),
        linear-gradient(180deg, #f7f9fe 0%, #ebf0fa 100%);
    --superficie: #ffffff;
    --superficie-2: #f7f9fe;
    --superficie-glass: rgba(255, 255, 255, 0.94);
    --overlay: rgba(6, 11, 26, 0.55);
    --sombra-1: 0 1px 2px rgba(11, 20, 48, 0.06), 0 1px 0 rgba(11, 20, 48, 0.04);
    --sombra-2: 0 18px 40px -18px rgba(11, 20, 48, 0.28);

    /* --- Paleta própria de app.css (cronograma principal) --- */
    --azul2: #2f6be0;
    --azul-claro: #dce7fc;
    --azul-bg: #edf3fe;
    --cinza: #5b6785;
    --erro-hover: #f8d7d3;
    --ok-borda: #a8e9d6;
    --alerta-borda: #f3dbb8;
    --info-bg: #edf3fe;
    --item-feito-bg: #f1fcf8;
    --destaque-borda: #93aee6;
    --sombra-3: 0 24px 60px -20px rgba(11, 20, 48, 0.35);

    /* --- Paleta categórica (gráficos com múltiplas séries, ex.: comparar
       usuários) — só usar nas 3 primeiras posições nessa ordem; validada
       para diferenciação sob daltonismo nesse recorte. --- */
    --serie-1: #2a78d6;
    --serie-2: #eb6834;
    --serie-3: #1baf7a;

    /* --- Tipografia --- */
    --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    /* Títulos, números de destaque e a marca. */
    --fonte-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    /* Rótulos curtos e contadores (ex.: "3/7"): algarismos de largura fixa. */
    --fonte-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 16px;
    --fs-xl: 19px;
    --fs-2xl: 24px;
    --fs-3xl: 30px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --azul: #4c8dff;
    /* No escuro o "hover" do botão primário clareia (texto escuro por cima). */
    --azul-escuro: #79a9ff;
    --azul-forte: #9dbeff;
    --azul-nevoa: #13214a;
    --nevoa-texto: #bcd3ff;
    --borda: #26335a;
    --texto: #e8eeff;
    --muted: #8e9bc0;
    --label: #c3cdeb;
    --erro: #ff8fa6;
    --erro-bg: #3a1627;
    --erro-borda: #6b2a42;
    --ok: #36f1cd;
    --ok-bg: #0f2b3a;
    --alerta-bg: #3b2d12;
    --alerta-texto: #ffc56e;
    --link-hover-bg: #1b2c5c;
    --ciano: #36f1cd;
    --ciano-texto: #36f1cd;

    --painel-ttable-fundo: linear-gradient(180deg, var(--ttable-fundo-2) 0%, var(--ttable-fundo) 100%);
    --painel-ttable-borda: var(--ttable-linha-forte);
    --painel-ttable-linha: var(--ttable-linha);
    --painel-ttable-superficie: var(--ttable-superficie);
    --painel-ttable-brilho-azul: var(--ttable-brilho-azul);
    --painel-ttable-brilho-ciano: var(--ttable-brilho-ciano);

    --sobre-azul: #060b1a;
    --topo-grad-1: #0c1735;
    --topo-grad-2: #081028;
    --topo-grade: rgba(148, 170, 230, 0.1);
    --grade: rgba(148, 170, 230, 0.1);
    --hover-sutil: rgba(148, 170, 230, 0.08);

    --fundo: #060b1a;
    --fundo-gradiente:
        radial-gradient(ellipse 70% 55% at 0% 0%, rgba(76, 141, 255, 0.22) 0%, rgba(76, 141, 255, 0) 70%),
        radial-gradient(ellipse 55% 45% at 100% 8%, rgba(54, 241, 205, 0.1) 0%, rgba(54, 241, 205, 0) 70%),
        linear-gradient(180deg, #0a1228 0%, #060b1a 100%);
    --superficie: #0e1631;
    --superficie-2: #131e3f;
    --superficie-glass: rgba(14, 22, 49, 0.86);
    --overlay: rgba(3, 6, 15, 0.7);
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.25);
    --sombra-2: 0 20px 50px -20px rgba(0, 0, 0, 0.8);

    --azul2: #6fa3ff;
    --azul-claro: #16244b;
    --azul-bg: #111d40;
    --cinza: #8e9bc0;
    --erro-hover: #4a1c31;
    --ok-borda: #1b5a5c;
    --alerta-borda: #6a4e1a;
    --info-bg: #13214a;
    --item-feito-bg: #0c2230;
    --destaque-borda: #3a5391;
    --sombra-3: 0 30px 80px -24px rgba(0, 0, 0, 0.75);

    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;
}