/* Paleta do MastellerChess em tokens --cor-*. Usada por public/layout.css, public/tema-escuro.css (gerado por
   scripts/tema-escuro.php) e pelas páginas avulsas (chat do Marc4W, classificação do jogador, análise do
   emparceiramento, página inicial, login). O tema vem de data-tema no <html> (x-tema.script).

   Proporção 60-30-10:
   - claro:  azul 60% (faixa do topo, fundo em volta, títulos, texto, botões), amarelo 30% (barra do menu e das
             abas, cabeçalhos de tabela, hover, destaques), cinza 10% (informação secundária, bordas).
   - escuro: amarelo 60% (superfícies em tons escuros quentes, títulos, texto creme), azul 30% (barra do menu e das
             abas, botões, chips ativos), cinza 10% (informação secundária).
   --cor-secundario é o cinza das informações secundárias (datas, cidades, contagens, subtítulos, rótulos). */
:root {
    color-scheme: light;
    --cor-topo: #1e3a8a;            /* faixa do topo */
    --cor-fundo: #dbe6f5;           /* em volta do conteúdo */
    --cor-superficie: #fff;         /* conteúdo, cartões, aba ativa */
    --cor-superficie-2: #fffbeb;    /* cabeçalho de tabela, hover */
    --cor-superficie-3: #eaf1fb;    /* chips, fundos de ícone */
    --cor-borda: #dbe3ef;
    --cor-borda-forte: #c3cfe0;
    --cor-texto: #0f1f3d;
    --cor-texto-2: #2b3b57;
    --cor-titulo: #1e3a8a;
    --cor-secundario: #6b7280;
    --cor-terciario: #9ca3af;
    --cor-primaria: #2563eb;        /* botões e ações */
    --cor-primaria-texto: #1d4ed8;  /* texto em azul */
    --cor-primaria-clara: #e8f0fe;
    --cor-ativa-texto: #1d4ed8;     /* item ativo de menu e abas */
    --cor-destaque: #facc15;        /* amarelo da marca */
    --cor-destaque-clara: #fef6d0;
    --cor-destaque-texto: #854d0e;
    --cor-aba: #fdf0b8;             /* barra do menu e das abas (itens não selecionados) */
    --cor-foco: #bfdbfe;
    --cor-sombra: rgba(15, 31, 61, .08);
}
[data-tema="escuro"] {
    color-scheme: dark;
    --cor-topo: #120e04;
    --cor-fundo: #0f0c06;
    --cor-superficie: #1c170c;
    --cor-superficie-2: #262011;
    --cor-superficie-3: #2f2815;
    --cor-borda: #3a321c;
    --cor-borda-forte: #4d4326;
    --cor-texto: #fbf3dc;
    --cor-texto-2: #e9dcb6;
    --cor-titulo: #fcd34d;
    --cor-secundario: #9ca3af;
    --cor-terciario: #737a86;
    --cor-primaria: #3b82f6;
    --cor-primaria-texto: #93c5fd;
    --cor-primaria-clara: rgba(59, 130, 246, .18);
    --cor-ativa-texto: #fcd34d;
    --cor-destaque: #facc15;
    --cor-destaque-clara: rgba(250, 204, 21, .14);
    --cor-destaque-texto: #fde68a;
    --cor-aba: #16254a;
    --cor-foco: rgba(59, 130, 246, .4);
    --cor-sombra: rgba(0, 0, 0, .45);
}

/* Modo claro: os cinzas claros e escuros do Tailwind entram na paleta (fundos amarelo/azul-claros, texto azul-
   marinho); os cinzas médios (400–600) continuam cinza, para a informação secundária */
[data-tema="claro"] {
    --color-gray-50: #fffbeb;
    --color-gray-100: #eaf1fb;
    --color-gray-200: #dbe3ef;
    --color-gray-300: #c3cfe0;
    --color-gray-700: #2b3b57;
    --color-gray-800: #1b2a47;
    --color-gray-900: #0f1f3d;
}

.texto-secundario { color: var(--cor-secundario); }
.fundo-tela { background-color: var(--cor-fundo); }