/* ============================================================================
   Real Campeonato — TOKENS
   ----------------------------------------------------------------------------
   Só custom properties. Nenhuma regra de seletor mora aqui.

   Três níveis, de propósito:
     PRIMITIVOS  — a paleta crua e as escalas. Nunca mudam com o tema.
     SEMÂNTICOS  — o significado ("fundo", "texto", "acento"). É só isto que
                   o tema escuro sobrescreve.
     MOVIMENTO   — curvas e durações nomeadas, para que animação no projeto
                   inteiro tenha a mesma "física". É o que separa uma tela que
                   parece aplicação de uma que parece documento.

   Regra dura do projeto: nenhum arquivo de componente escreve cor literal.
   Tudo é var(--*). Foi assim que o seletor de cor do admin pôde morrer sem
   deixar buraco — a paleta é fixa e pensada, não configurável.
   ============================================================================ */

:root {
    /* ---------------------------------------------------------- PRIMITIVOS */
    --cinza-25:  #FCFCFD;
    --cinza-50:  #F9FAFB;
    --cinza-100: #F2F4F7;
    --cinza-200: #E4E7EC;
    --cinza-300: #D0D5DD;
    --cinza-400: #98A2B3;
    --cinza-500: #667085;
    --cinza-600: #475467;
    --cinza-700: #344054;
    --cinza-800: #1D2939;
    --cinza-900: #101828;
    --cinza-950: #0C111D;

    /* Índigo é a cor de MARCA (ações, item ativo, destaque de dado). Escolhida
       por ser sóbria e sem carga semântica: verde e vermelho precisam ficar
       livres para dizer "deu certo" e "deu errado" — quando o verde é também a
       cor do botão primário, o olho para de distinguir marca de status. */
    --indigo-50:  #EEF4FF;
    --indigo-100: #E0EAFF;
    --indigo-200: #C7D7FE;
    --indigo-400: #8098F9;
    --indigo-500: #6172F3;
    --indigo-600: #444CE7;
    --indigo-700: #3538CD;
    --indigo-800: #2D31A6;

    --verde-50:  #ECFDF3;
    --verde-100: #D1FADF;
    --verde-400: #32D583;
    --verde-500: #12B76A;
    --verde-600: #039855;
    --verde-700: #027A48;
    --verde-900: #054F31;

    --azul-50:   #EFF8FF;
    --azul-400:  #53B1FD;
    --azul-500:  #2E90FA;
    --azul-600:  #1570EF;
    --azul-700:  #175CD3;

    --ambar-50:  #FFFAEB;
    --ambar-400: #FDB022;
    --ambar-500: #F79009;
    --ambar-600: #DC6803;
    --ambar-700: #B54708;

    --vermelho-50:  #FEF3F2;
    --vermelho-400: #F97066;
    --vermelho-500: #F04438;
    --vermelho-600: #D92D20;
    --vermelho-700: #B42318;

    --roxo-400: #9B8AFB;
    --roxo-500: #7A5AF8;
    --roxo-600: #6938EF;

    /* Família completa desde que a paleta "Rosa" passou a existir: antes só
       havia o 500, e uma paleta precisa de 50 (fundo suave), 400 (acento no
       escuro), 600 e 700 (acento e forte no claro). */
    --rosa-50:  #FDF2FA;
    --rosa-400: #F670C7;
    --rosa-500: #EE46BC;
    --rosa-600: #DD2590;
    --rosa-700: #C11574;

    --ciano-500: #06AED4;

    /* --------------------------------------------------------- TIPOGRAFIA */
    --fonte-base:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fonte-titulo: var(--fonte-base);
    --fonte-mono:   ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

    --texto-xs:   11px;
    --texto-sm:   12px;
    --texto-base: 14px;
    --texto-md:   15px;
    --texto-lg:   18px;
    --texto-xl:   22px;
    --texto-2xl:  28px;
    --texto-3xl:  36px;
    --texto-4xl:  48px;
    --texto-5xl:  64px;

    /* ------------------------------------------------------------- ESPAÇO */
    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 20px;
    --esp-6: 24px;
    --esp-8: 32px;
    --esp-10: 40px;
    --esp-12: 48px;
    --esp-16: 64px;
    --esp-20: 80px;

    /* -------------------------------------------------------------- FORMA */
    --raio-sm:   6px;
    --raio:      10px;
    --raio-lg:   14px;
    --raio-xl:   20px;
    --raio-2xl:  28px;
    --raio-full: 999px;

    /* ---------------------------------------------------------- MOVIMENTO
       Uma escala pequena e nomeada. "--saida" é a curva de algo que entra
       desacelerando (menus, cartões); "--mola" tem um leve overshoot e é só
       para elementos que o usuário acabou de invocar. */
    --vel-rapida: 120ms;
    --vel:        200ms;
    --vel-lenta:  340ms;
    --vel-cena:   620ms;

    --curva:       cubic-bezier(.4, 0, .2, 1);
    --curva-saida: cubic-bezier(.16, 1, .3, 1);
    --curva-mola:  cubic-bezier(.34, 1.56, .64, 1);

    --transicao: var(--vel) var(--curva);

    /* ------------------------------------------------------------ CAMADAS */
    --z-base: 1;
    --z-sticky: 30;
    --z-topo: 40;
    --z-veu: 50;
    --z-lateral: 60;
    --z-flutuante: 120;
    --z-modal: 200;
    --z-toast: 300;
    --z-tooltip: 400;

    /* ------------------------------------------------------------ MEDIDAS */
    --largura-sidebar: 248px;
    --largura-conteudo: 1240px;
    --largura-texto: 68ch;
    --altura-topo: 64px;

    /* ------------------------------------------------- SEMÂNTICOS (claro) */
    --fundo:          var(--cinza-50);
    --fundo-fundo:    var(--cinza-100);
    --superficie:     #FFFFFF;
    --superficie-2:   var(--cinza-50);
    --superficie-alt: var(--cinza-100);

    /* PLACA DE MARCA DE TERCEIRO — o fundo sob logomarca de patrocinador.
       Logomarca é arte de outra pessoa, quase sempre PNG transparente
       desenhado para papel branco. Sem uma base clara ela some no tema
       escuro, e "consertar" com filtro (silhueta, inversão) destrói
       ilustração, gradiente e segunda cor.
       A placa é CLARA NOS DOIS TEMAS de propósito: é a única forma de a marca
       aparecer sempre como o dono dela a desenhou. */
    --placa-marca:        #FFFFFF;
    --placa-marca-borda:  var(--cinza-200);
    --superficie-inv: var(--cinza-900);
    --borda:          var(--cinza-200);
    --borda-forte:    var(--cinza-300);

    --texto:           var(--cinza-900);
    --texto-suave:     var(--cinza-500);
    --texto-fraco:     var(--cinza-400);
    --texto-invertido: #FFFFFF;

    --acento:           var(--indigo-600);
    --acento-forte:     var(--indigo-700);
    --acento-suave:     var(--indigo-50);
    --acento-contraste: #FFFFFF;

    --sucesso: var(--verde-600);  --sucesso-suave: var(--verde-50);
    --erro:    var(--vermelho-600); --erro-suave:  var(--vermelho-50);
    --alerta:  var(--ambar-600);  --alerta-suave:  var(--ambar-50);
    --info:    var(--azul-600);   --info-suave:    var(--azul-50);
    --ouro:    var(--ambar-500);

    /* Variantes FORTES, para texto sobre o fundo suave da mesma cor.
       Mesmo papel de `--acento-forte`. A cor normal (600) sobre o fundo 50
       fica em ~3.3:1 de contraste — abaixo do mínimo de 4.5 para texto
       pequeno, e é por isso que um selo "Agendado" parecia apagado. Um degrau
       mais escuro leva a mesma família para ~5:1 sem perder a leitura de cor. */
    --sucesso-forte: var(--verde-700);
    --erro-forte:    var(--vermelho-700);
    --alerta-forte:  var(--ambar-700);
    --info-forte:    var(--azul-700);

    /* ------------------------------------------------------- BARRA DO SITE
       O cabeçalho público é escuro NOS DOIS TEMAS. Não é descuido: é ele que
       separa o "canal" (marca e navegação) do conteúdo, do jeito que portal
       esportivo faz. Usar os semânticos de superfície aqui faria a barra
       clarear junto com a página e perder essa função. */
    --topo-fundo:       var(--cinza-900);
    --topo-texto:       #FFFFFF;
    --topo-texto-suave: var(--cinza-300);
    --topo-texto-fraco: var(--cinza-500);
    --topo-borda:       rgb(255 255 255 / .08);
    --topo-hover:       rgb(255 255 255 / .10);

    /* Vidro: a barra fixa precisa deixar o conteúdo passar por baixo com
       leitura preservada. Cor + blur juntos, para não repetir em 4 arquivos. */
    --vidro:      color-mix(in srgb, var(--superficie) 78%, transparent);
    --vidro-forte: color-mix(in srgb, var(--superficie) 92%, transparent);
    --desfoque:   saturate(180%) blur(12px);

    --sombra-sm: 0 1px 2px rgb(16 24 40 / .05);
    --sombra:    0 1px 3px rgb(16 24 40 / .10), 0 1px 2px rgb(16 24 40 / .06);
    --sombra-md: 0 4px 8px -2px rgb(16 24 40 / .10), 0 2px 4px -2px rgb(16 24 40 / .06);
    --sombra-lg: 0 12px 16px -4px rgb(16 24 40 / .08), 0 4px 6px -2px rgb(16 24 40 / .03);
    --sombra-xl: 0 24px 48px -12px rgb(16 24 40 / .18);
    --sombra-acento: 0 8px 24px -6px color-mix(in srgb, var(--acento) 45%, transparent);
    --foco: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent);

    /* --------------------------------------------------------- GRADIENTES
       Usados em heróis, capas de post e avatares sem foto. Ficam aqui para
       que claro e escuro possam trocá-los sem tocar em componente. */
    --grad-acento: linear-gradient(135deg, var(--indigo-500), var(--indigo-700));
    --grad-quente: linear-gradient(135deg, var(--ambar-400), var(--vermelho-500));
    --grad-frio:   linear-gradient(135deg, var(--azul-400), var(--roxo-600));
    --grad-noite:  linear-gradient(160deg, var(--cinza-800), var(--cinza-950));
    --grad-palco:  radial-gradient(1200px 480px at 12% -10%,
                       color-mix(in srgb, var(--indigo-500) 14%, transparent), transparent 60%),
                   radial-gradient(900px 420px at 92% 8%,
                       color-mix(in srgb, var(--ciano-500) 12%, transparent), transparent 62%);
    --brilho-tela: color-mix(in srgb, var(--acento) 10%, transparent);

    /* ---------------------------------------------------------- GRÁFICOS
       Série categórica dos gráficos SVG. Ordem fixa: um mesmo dado recebe a
       mesma cor em qualquer tela. */
    /* Ordem pensada para máxima distinção entre vizinhos — duas fatias lado a
       lado nunca são tons próximos. */
    --serie-1: var(--indigo-500);
    --serie-2: var(--ambar-500);
    --serie-3: var(--ciano-500);
    --serie-4: var(--roxo-500);
    --serie-5: var(--vermelho-500);
    --serie-6: var(--verde-500);
    --grade-grafico: var(--cinza-200);

    /* -------------------------------------------------------------- PLACAR
       Times não têm cor cadastrada (seria poluição visual e trabalho de
       cadastro sem retorno). Mandante e visitante são distinguidos por duas
       cores FIXAS do sistema — sempre as mesmas, em qualquer jogo, o que
       ajuda o mesário a ler a quadra sem pensar. */
    --time-casa: var(--azul-600);
    --time-fora: var(--ambar-600);
    --cor-time:  var(--acento);          /* fallback quando o lado não define */
    --brilho: 0 0 0 3px color-mix(in srgb, var(--cor-time) 22%, transparent);
}

/* ------------------------------------------------------- SEMÂNTICOS (escuro)
   Só os semânticos mudam. Os primitivos ficam de pé para que os tons de apoio
   (etiquetas, gráficos) continuem coerentes nos dois temas. */
[data-tema="escuro"] {
    --fundo:          var(--cinza-950);
    --fundo-fundo:    #080C14;
    --superficie:     var(--cinza-900);
    --superficie-2:   #131A26;
    --superficie-alt: var(--cinza-800);

    /* No escuro a placa continua clara, mas não BRANCA: #FFF puro contra um
       fundo quase preto vira um facho que puxa o olho para o rodapé e ofusca
       em tela grande. O cinza-100 mantém a marca legível e a placa calma.
       A borda some — no escuro o contraste da própria placa já a delimita, e
       um contorno claro viraria um segundo retângulo desenhado. */
    --placa-marca:        var(--cinza-100);
    --placa-marca-borda:  transparent;
    --superficie-inv: var(--cinza-100);
    --borda:          #1F2937;
    --borda-forte:    var(--cinza-700);

    --texto:           var(--cinza-50);
    --texto-suave:     var(--cinza-400);
    --texto-fraco:     var(--cinza-500);
    --texto-invertido: var(--cinza-900);

    /* No escuro o acento clareia: índigo-600 sobre fundo quase preto não tem
       contraste suficiente para texto nem para o item ativo do menu. */
    --acento:           var(--indigo-400);
    --acento-forte:     var(--indigo-200);
    --acento-suave:     color-mix(in srgb, var(--indigo-500) 20%, transparent);
    --acento-contraste: var(--cinza-950);

    --sucesso: var(--verde-500);    --sucesso-suave: color-mix(in srgb, var(--verde-500) 14%, transparent);
    --erro:    var(--vermelho-400); --erro-suave:    color-mix(in srgb, var(--vermelho-500) 16%, transparent);
    --alerta:  var(--ambar-400);    --alerta-suave:  color-mix(in srgb, var(--ambar-500) 16%, transparent);
    --info:    var(--azul-400);     --info-suave:    color-mix(in srgb, var(--azul-500) 16%, transparent);
    --ouro:    var(--ambar-400);

    /* No escuro "forte" significa MAIS CLARO — o fundo suave aqui é a própria
       cor diluída no preto, e um tom 700 desapareceria nele. Mesma inversão
       que `--acento-forte` já faz. */
    --sucesso-forte: var(--verde-400);
    --erro-forte:    var(--vermelho-400);
    --alerta-forte:  var(--ambar-400);
    --info-forte:    var(--azul-400);

    /* No escuro a barra fica ainda mais funda que a página, para continuar
       se destacando como faixa. */
    --topo-fundo:       #070B12;
    --topo-texto-suave: var(--cinza-400);
    --topo-borda:       rgb(255 255 255 / .06);
    --topo-hover:       rgb(255 255 255 / .08);

    --vidro:       color-mix(in srgb, var(--cinza-900) 72%, transparent);
    --vidro-forte: color-mix(in srgb, var(--cinza-900) 92%, transparent);

    --sombra-sm: 0 1px 2px rgb(0 0 0 / .30);
    --sombra:    0 1px 3px rgb(0 0 0 / .40), 0 1px 2px rgb(0 0 0 / .30);
    --sombra-md: 0 4px 8px -2px rgb(0 0 0 / .45), 0 2px 4px -2px rgb(0 0 0 / .30);
    --sombra-lg: 0 12px 16px -4px rgb(0 0 0 / .45), 0 4px 6px -2px rgb(0 0 0 / .30);
    --sombra-xl: 0 24px 48px -12px rgb(0 0 0 / .65);

    --grad-noite: linear-gradient(160deg, #16203040, #0C111D);
    --grad-palco: radial-gradient(1200px 480px at 12% -10%,
                      color-mix(in srgb, var(--indigo-500) 16%, transparent), transparent 60%),
                  radial-gradient(900px 420px at 92% 8%,
                      color-mix(in srgb, var(--roxo-500) 14%, transparent), transparent 62%);

    --serie-1: var(--indigo-400);
    --serie-2: var(--ambar-400);
    --serie-3: var(--ciano-500);
    --serie-4: var(--roxo-400);
    --serie-5: var(--vermelho-400);
    --serie-6: var(--verde-400);
    --grade-grafico: #1F2937;

    --time-casa: var(--azul-400);
    --time-fora: var(--ambar-400);
}

/* ============================================================================
   PALETAS POR CATEGORIA
   ============================================================================
   Cada categoria (Masculino, Feminino, base) escolhe uma paleta de uma lista
   FECHADA — ver Core\Categoria::PALETAS. Não é seletor de cor livre: aquele
   morreu de propósito neste projeto, porque escolha livre sempre acabava em
   combinação que polui a tela.

   Só quatro variáveis mudam. Todo o resto (`--sombra-acento`, `--foco`,
   `--brilho-tela`, `--cor-time`) já deriva de `--acento` por `color-mix` e
   acompanha de graça — foi essa disciplina que tornou isto barato.

   O CSS continua ESTÁTICO: o PHP emite um atributo `data-paleta` na tag <html>
   e nada mais. Nenhuma folha gerada por requisição, nenhum <style> no
   documento, o mesmo `?v=filemtime` de cache.

   `indigo` não aparece aqui: é o padrão já declarado lá em cima, e repeti-lo
   criaria duas verdades sobre a mesma cor.

   Só entram famílias com os degraus completos (50/400/500/600/700). `ciano` e
   `roxo` ainda têm degraus faltando — acrescentar uma paleta com elas exige
   completar a família primeiro, como foi feito com a rosa. */

:root[data-paleta="esmeralda"] {
    --acento:       var(--verde-600);
    --acento-forte: var(--verde-700);
    --acento-suave: var(--verde-50);
    --grad-acento:  linear-gradient(135deg, var(--verde-500), var(--verde-700));
}
:root[data-paleta="azul"] {
    --acento:       var(--azul-600);
    --acento-forte: var(--azul-700);
    --acento-suave: var(--azul-50);
    --grad-acento:  linear-gradient(135deg, var(--azul-500), var(--azul-700));
}
:root[data-paleta="ambar"] {
    --acento:       var(--ambar-600);
    --acento-forte: var(--ambar-700);
    --acento-suave: var(--ambar-50);
    --grad-acento:  linear-gradient(135deg, var(--ambar-500), var(--ambar-700));
}
:root[data-paleta="rosa"] {
    --acento:       var(--rosa-600);
    --acento-forte: var(--rosa-700);
    --acento-suave: var(--rosa-50);
    --grad-acento:  linear-gradient(135deg, var(--rosa-500), var(--rosa-700));
}
:root[data-paleta="vermelho"] {
    --acento:       var(--vermelho-600);
    --acento-forte: var(--vermelho-700);
    --acento-suave: var(--vermelho-50);
    --grad-acento:  linear-gradient(135deg, var(--vermelho-500), var(--vermelho-700));
}

/* No escuro o acento CLAREIA, pela mesma razão do índigo lá em cima: o tom 600
   sobre fundo quase preto não tem contraste para texto nem para o item ativo.

   `--acento-forte` sai de um `color-mix` com branco em vez de um degrau 200:
   só o índigo tem esse degrau na paleta primitiva, e inventar tons novos para
   quatro famílias seria muito mais superfície para manter do que a mistura. */
:root[data-tema="escuro"][data-paleta="esmeralda"] {
    --acento:       var(--verde-400);
    --acento-forte: color-mix(in srgb, var(--verde-400) 65%, #FFF);
    --acento-suave: color-mix(in srgb, var(--verde-500) 20%, transparent);
}
:root[data-tema="escuro"][data-paleta="azul"] {
    --acento:       var(--azul-400);
    --acento-forte: color-mix(in srgb, var(--azul-400) 65%, #FFF);
    --acento-suave: color-mix(in srgb, var(--azul-500) 20%, transparent);
}
:root[data-tema="escuro"][data-paleta="ambar"] {
    --acento:       var(--ambar-400);
    --acento-forte: color-mix(in srgb, var(--ambar-400) 65%, #FFF);
    --acento-suave: color-mix(in srgb, var(--ambar-500) 20%, transparent);
}
:root[data-tema="escuro"][data-paleta="rosa"] {
    --acento:       var(--rosa-400);
    --acento-forte: color-mix(in srgb, var(--rosa-400) 65%, #FFF);
    --acento-suave: color-mix(in srgb, var(--rosa-500) 20%, transparent);
}
:root[data-tema="escuro"][data-paleta="vermelho"] {
    --acento:       var(--vermelho-400);
    --acento-forte: color-mix(in srgb, var(--vermelho-400) 65%, #FFF);
    --acento-suave: color-mix(in srgb, var(--vermelho-500) 20%, transparent);
}