/* =====================================================================
   A MARCA, ISOLADA
   =====================================================================
   Nenhuma cor escrita fora daqui. Nem uma. Se você precisou de um `#` num
   arquivo de componente, falta um token, acrescente aqui.

   ─── terceira tentativa, e o motivo ────────────────────────────────────
   A primeira foi violeta sobre cinza-azulado. A segunda foi âmbar sobre
   quase-preto quente. As duas levaram a mesma crítica, e na segunda vez
   com razão de sobra: o cetecritic é quase-preto (`#0e0f12`) com destaque
   âmbar, então trocar o violeta por âmbar sobre preto foi andar na direção
   dele, não para longe.

   Esta versão não escolhe cor por gosto. Ela vai buscar as duas cores do
   brasão da UCS, que é a instituição da escola, e usa uma em cada tema:

     · TEMA ESCURO  · o azul  #2E6CB1, aberto para neon em #4D9FFF
     · TEMA CLARO   · o vermelho #C32F2F

   Duas coisas mais afastam do outro site, e nenhuma delas é cor:

   1. VIDRO. As superfícies são translúcidas com desfoque por trás, com um
      fio de luz na aresta de cima. É a diferença entre um cartão colado no
      fundo e um cartão flutuando sobre ele.
   2. NEON. O acento não é só pintado: ele brilha. Aba ativa, opção
      escolhida, campeão e o pulso do ao vivo carregam um halo.

   E o que NÃO acontece, porque foi pedido "sem perder a nitidez":
   texto nunca fica sobre vidro de baixo contraste, borda continua de 1px
   sem desfoque, número continua tabular e sólido, e o painel continua
   OPACO por inteiro. A tela de quadra é usada sob sol, e vidro sob sol é
   ilegível: isso não é preferência, é a D-009.
   ===================================================================== */

/* =====================================================================
   TEMA CLARO · o vermelho da UCS
   ===================================================================== */
:root {
  color-scheme: light;

  /* ─── a tinta ────────────────────────────────────────────────────────
     Azul-noite quase preto, que é o outro lado do mesmo brasão. Pinta
     botão primário e qualquer coisa que precise de peso. */
  --marca:          #14243F;
  /* O tronco do ipê do logo. Escuro no claro, claro no escuro: o tronco
     precisa contrastar com o fundo, não com as folhas. */
  --tronco:         #14243F;
  --marca-forte:    #0A1729;
  --marca-suave:    rgba(46, 108, 177, .10);
  --marca-contorno: rgba(46, 108, 177, .30);
  --sobre-marca:    #FFFFFF;

  /* ─── o acento: o vermelho do brasão ────────────────────────────── */
  --acento:         #C32F2F;
  --acento-vivo:    #E23A3A;
  --acento-fundo:   rgba(195, 47, 47, .10);
  --acento-contorno:rgba(195, 47, 47, .38);
  --sobre-acento:   #FFFFFF;

  /* ─── neon ───────────────────────────────────────────────────────────
     O halo. Sobre fundo claro ele é discreto de propósito: neon em tela
     branca vira borrão antes de virar brilho. */
  --brilho:       0 0 0 1px rgba(195, 47, 47, .22), 0 0 16px rgba(195, 47, 47, .28);
  --brilho-forte: 0 0 0 1px rgba(195, 47, 47, .35), 0 0 26px rgba(195, 47, 47, .38);
  --brilho-texto: 0 0 12px rgba(195, 47, 47, .28);

  /* ─── superfícies e vidro ────────────────────────────────────────────
     `--superficie` é translúcida: é ela que faz o vidro. Onde vidro não
     serve (painel, impressão, quem pede menos transparência) entra a
     `--superficie-solida`, e um atributo troca as duas de uma vez. */
  --fundo:            #EFF3F9;
  --fundo-fundo:      #E2E9F2;
  --superficie:       rgba(255, 255, 255, .72);
  --superficie-solida:#FFFFFF;
  --superficie-2:     rgba(247, 250, 253, .82);
  --linha:            rgba(16, 32, 64, .12);
  --linha-forte:      rgba(16, 32, 64, .22);

  --vidro-desfoque: blur(20px) saturate(180%);
  --vidro-borda:    rgba(255, 255, 255, .85);
  --vidro-topo:     inset 0 1px 0 rgba(255, 255, 255, .92);

  /* ─── texto ─────────────────────────────────────────────────────── */
  --texto:   #0F1A2E;
  --texto-2: #4A5A72;
  --texto-3: #77869C;

  /* ─── estados esportivos ────────────────────────────────────────────
     Fixos. Não seguem o acento e não mudam nunca. Com o acento vermelho
     no tema claro, derrota puxa para o vinho e ao vivo para o rosa, para
     as três vermelhidões não se confundirem: e as três sempre vêm com
     letra ou rótulo junto, que é quem carrega o sentido de verdade. */
  --vitoria:       #0E7A47;  --vitoria-fundo: rgba(14, 122, 71, .11);
  --empate:        #5B6B82;  --empate-fundo:  rgba(91, 107, 130, .12);
  --derrota:       #8A1F26;  --derrota-fundo: rgba(138, 31, 38, .10);
  --ao-vivo:       #E11D48;  --ao-vivo-fundo: rgba(225, 29, 72, .12);
  --alerta:        #96590A;  --alerta-fundo:  rgba(150, 89, 10, .13);
  --brilho-ao-vivo: 0 0 10px rgba(225, 29, 72, .55);

  /* ─── cromo: navegação, cabeçalho, modal ────────────────────────── */
  --cromo-fundo:    rgba(255, 255, 255, .62);
  --cromo-borda:    rgba(16, 32, 64, .10);
  --cromo-desfoque: blur(22px) saturate(180%);
  --veu:            rgba(12, 20, 36, .42);

  /* ─── forma ─────────────────────────────────────────────────────── */
  --r-1: 5px;  --r-2: 9px;   --r-3: 14px;  --r-4: 20px;  --r-redondo: 999px;
  --e-1: 4px;  --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px; --e-6: 32px;  --e-7: 48px;  --e-8: 64px;

  /* Alvo de toque. 48 é o mínimo do projeto, porque o público opera com
     uma mão, em pé, no intervalo. Na tela de quadra sobe para 112. */
  --toque: 48px;
  --toque-quadra: 72px;

  --sombra-1: 0 1px 2px rgba(12, 24, 48, .06), 0 1px 1px rgba(12, 24, 48, .04);
  --sombra-2: 0 6px 20px rgba(12, 24, 48, .10);
  --sombra-3: 0 18px 44px rgba(12, 24, 48, .18);

  /* ─── tipografia ────────────────────────────────────────────────────
     Pilha do sistema, sem fonte baixada: peso da primeira visita sob
     controle, em dados móveis contados. */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, "Noto Sans", sans-serif;
  --fonte-num: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --t-micro: .6875rem;  --t-min: .75rem;    --t-peq: .8125rem;
  --t-base:  .9375rem;  --t-med: 1.0625rem; --t-gr:  1.25rem;
  --t-tit:   1.5rem;    --t-mega: 2rem;     --t-placar: 2.75rem;
}

/* =====================================================================
   TEMA ESCURO · o azul da UCS, em neon
   ===================================================================== */
[data-tema="escuro"] {
  color-scheme: dark;

  --marca:          #E9F1FD;
  --tronco:         #E9F1FD;
  --marca-forte:    #FFFFFF;
  --marca-suave:    rgba(77, 159, 255, .16);
  --marca-contorno: rgba(77, 159, 255, .38);
  --sobre-marca:    #071021;

  --acento:         #4D9FFF;
  --acento-vivo:    #8CC4FF;
  --acento-fundo:   rgba(77, 159, 255, .16);
  --acento-contorno:rgba(77, 159, 255, .48);
  --sobre-acento:   #04101F;

  --brilho:       0 0 0 1px rgba(77, 159, 255, .38), 0 0 18px rgba(77, 159, 255, .42);
  --brilho-forte: 0 0 0 1px rgba(77, 159, 255, .55), 0 0 30px rgba(77, 159, 255, .55);
  --brilho-texto: 0 0 14px rgba(77, 159, 255, .55);

  --fundo:            #070C16;
  --fundo-fundo:      #04070E;
  --superficie:       rgba(20, 34, 58, .58);
  --superficie-solida:#101B2E;
  --superficie-2:     rgba(28, 45, 74, .62);
  --linha:            rgba(120, 170, 235, .16);
  --linha-forte:      rgba(120, 170, 235, .32);

  --vidro-desfoque: blur(20px) saturate(170%);
  --vidro-borda:    rgba(150, 195, 255, .16);
  --vidro-topo:     inset 0 1px 0 rgba(180, 215, 255, .18);

  --texto:   #E9F1FD;
  --texto-2: #A6B8D4;
  --texto-3: #7286A5;

  --vitoria:       #3FD98A;  --vitoria-fundo: rgba(63, 217, 138, .15);
  --empate:        #93A7C4;  --empate-fundo:  rgba(147, 167, 196, .15);
  --derrota:       #FF7A8A;  --derrota-fundo: rgba(255, 122, 138, .15);
  --ao-vivo:       #FF4569;  --ao-vivo-fundo: rgba(255, 69, 105, .17);
  --alerta:        #FFC24D;  --alerta-fundo:  rgba(255, 194, 77, .15);
  --brilho-ao-vivo: 0 0 12px rgba(255, 69, 105, .75);

  --cromo-fundo:    rgba(10, 18, 32, .62);
  --cromo-borda:    rgba(120, 170, 235, .14);
  --cromo-desfoque: blur(22px) saturate(170%);
  --veu:            rgba(2, 6, 14, .66);

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-2: 0 6px 20px rgba(0, 0, 0, .55);
  --sombra-3: 0 18px 44px rgba(0, 0, 0, .65);
}

/* Sem escolha registrada, vale o que o aparelho pede. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --marca: #E9F1FD; --marca-forte: #FFFFFF; --tronco: #E9F1FD;
    --marca-suave: rgba(77,159,255,.16); --marca-contorno: rgba(77,159,255,.38);
    --sobre-marca: #071021;
    --acento: #4D9FFF; --acento-vivo: #8CC4FF;
    --acento-fundo: rgba(77,159,255,.16); --acento-contorno: rgba(77,159,255,.48);
    --sobre-acento: #04101F;
    --brilho: 0 0 0 1px rgba(77,159,255,.38), 0 0 18px rgba(77,159,255,.42);
    --brilho-forte: 0 0 0 1px rgba(77,159,255,.55), 0 0 30px rgba(77,159,255,.55);
    --brilho-texto: 0 0 14px rgba(77,159,255,.55);
    --fundo: #070C16; --fundo-fundo: #04070E;
    --superficie: rgba(20,34,58,.58); --superficie-solida: #101B2E;
    --superficie-2: rgba(28,45,74,.62);
    --linha: rgba(120,170,235,.16); --linha-forte: rgba(120,170,235,.32);
    --vidro-desfoque: blur(20px) saturate(170%);
    --vidro-borda: rgba(150,195,255,.16);
    --vidro-topo: inset 0 1px 0 rgba(180,215,255,.18);
    --texto: #E9F1FD; --texto-2: #A6B8D4; --texto-3: #7286A5;
    --vitoria: #3FD98A; --vitoria-fundo: rgba(63,217,138,.15);
    --empate: #93A7C4;  --empate-fundo:  rgba(147,167,196,.15);
    --derrota: #FF7A8A; --derrota-fundo: rgba(255,122,138,.15);
    --ao-vivo: #FF4569; --ao-vivo-fundo: rgba(255,69,105,.17);
    --alerta: #FFC24D;  --alerta-fundo:  rgba(255,194,77,.15);
    --brilho-ao-vivo: 0 0 12px rgba(255,69,105,.75);
    --cromo-fundo: rgba(10,18,32,.62); --cromo-borda: rgba(120,170,235,.14);
    --cromo-desfoque: blur(22px) saturate(170%);
    --veu: rgba(2,6,14,.66);
    --sombra-1: 0 1px 2px rgba(0,0,0,.5);
    --sombra-2: 0 6px 20px rgba(0,0,0,.55);
    --sombra-3: 0 18px 44px rgba(0,0,0,.65);
  }
}

/* =====================================================================
   ACENTOS ALTERNATIVOS
   =====================================================================
   O padrão usa uma cor do brasão em cada tema. Quem preferir a mesma cor
   nos dois muda um atributo no <html>, em Ajustes.
   ===================================================================== */
[data-marca="azul"] {
  --acento: #2E6CB1; --acento-vivo: #3D86D8;
  --acento-fundo: rgba(46,108,177,.12); --acento-contorno: rgba(46,108,177,.40);
  --sobre-acento: #FFFFFF;
  --brilho:       0 0 0 1px rgba(46,108,177,.25), 0 0 16px rgba(46,108,177,.30);
  --brilho-forte: 0 0 0 1px rgba(46,108,177,.38), 0 0 26px rgba(46,108,177,.40);
  --brilho-texto: 0 0 12px rgba(46,108,177,.30);
}
[data-tema="escuro"][data-marca="vermelho"],
[data-marca="vermelho"][data-tema="escuro"] {
  --acento: #FF6B6B; --acento-vivo: #FF9A9A;
  --acento-fundo: rgba(255,107,107,.16); --acento-contorno: rgba(255,107,107,.48);
  --sobre-acento: #200507;
  --brilho:       0 0 0 1px rgba(255,107,107,.38), 0 0 18px rgba(255,107,107,.42);
  --brilho-forte: 0 0 0 1px rgba(255,107,107,.55), 0 0 30px rgba(255,107,107,.55);
  --brilho-texto: 0 0 14px rgba(255,107,107,.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"])[data-marca="vermelho"] {
    --acento: #FF6B6B; --acento-vivo: #FF9A9A;
    --acento-fundo: rgba(255,107,107,.16); --acento-contorno: rgba(255,107,107,.48);
    --sobre-acento: #200507;
    --brilho: 0 0 0 1px rgba(255,107,107,.38), 0 0 18px rgba(255,107,107,.42);
    --brilho-forte: 0 0 0 1px rgba(255,107,107,.55), 0 0 30px rgba(255,107,107,.55);
    --brilho-texto: 0 0 14px rgba(255,107,107,.55);
  }
}

/* =====================================================================
   QUANDO O VIDRO SAI
   =====================================================================
   Uma linha desliga a translucidez do site inteiro. O painel nasce assim,
   e quem enxerga melhor sem vidro liga em Conta. O sistema operacional
   também pode pedir, e o pedido é respeitado.
   ===================================================================== */
[data-material="opaco"] {
  --superficie:  var(--superficie-solida);
  --superficie-2: var(--superficie-solida);
  --cromo-fundo: var(--superficie-solida);
  --cromo-desfoque: none;
  --vidro-desfoque: none;
  --vidro-topo: none;
  --vidro-borda: var(--linha);
}
[data-tema="escuro"][data-material="opaco"] { --superficie-2: #17253C; }

@media (prefers-reduced-transparency: reduce) {
  :root {
    --superficie: var(--superficie-solida);
    --cromo-fundo: var(--superficie-solida);
    --cromo-desfoque: none;
    --vidro-desfoque: none;
  }
}