/* ═══════════════════════════════════════════════════════════════════════
   TOKENS DO NOVO BOSS APP
   ═══════════════════════════════════════════════════════════════════════

   O vocabulário visual do app novo, num lugar só. Toda tela remodelada
   puxa daqui e não escreve cor na mão. Trocar a identidade inteira do app
   passa a ser mexer neste arquivo.

   ⚠️ ARMADILHA DO TEMA (aprendida na marra)
   No CSS antigo existe um bloco `:root` com uma paleta AZUL. Ela não é a
   paleta do app. O tema que roda de verdade é o `body.theme-copa`, que
   sobrescreve quase tudo com o verde. Quem lê o `:root` e acha que achou
   a cor do Boss, pega a cor errada.

   Os valores abaixo foram COPIADOS do theme-copa que está no ar em
   14/09/2026. Não são invenção nem "inspiração": são a cor do app hoje.
   ═══════════════════════════════════════════════════════════════════════ */

:root {

  /* ── AS CORES DO BOSS ──────────────────────────────────────────────── */
  --boss-verde:        #00c84b;   /* o primário do tema copa */
  --boss-verde-escuro: #009933;   /* o accent */
  --boss-ouro:         #e8b73a;   /* regra fixa do Boss, não mexer */
  --boss-amarelo:      #f0d24d;   /* o texto de destaque */
  --boss-vermelho:     #ff4757;   /* erro, perigo, eliminado */

  /* ── O FUNDO ───────────────────────────────────────────────────────── */
  --fundo:        #010a02;        /* o verde quase preto do app */
  --fundo-fundo:  #050508;        /* o preto de baixo de tudo */
  --fundo-carta:  rgba(0, 10, 4, 0.88);
  --borda:        rgba(0, 200, 75, 0.35);
  --borda-fraca:  rgba(255, 255, 255, 0.09);

  /* ── O TEXTO ───────────────────────────────────────────────────────── */
  --texto:        #c5c6c7;
  --texto-forte:  #ffffff;
  --texto-fraco:  #7c8a80;
  --texto-ouro:   var(--boss-ouro);

  /* ── AS LETRAS ─────────────────────────────────────────────────────────
     Família Barlow, decisão do Boss em 16/08. Condensed nos títulos,
     Semi Condensed nos rótulos, Barlow no texto corrido. */
  --fonte-titulo: 'Barlow Condensed', sans-serif;
  --fonte-rotulo: 'Barlow Semi Condensed', sans-serif;
  --fonte-texto:  'Barlow', sans-serif;

  /* ── O ESPAÇO ──────────────────────────────────────────────────────────
     Escala de 4 em 4. Espaçamento no app novo sai daqui, nunca de número
     solto no meio do CSS. */
  --e1:  4px;
  --e2:  8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  /* ── O CANTO ───────────────────────────────────────────────────────── */
  --canto-p:  8px;
  --canto-m: 12px;
  --canto-g: 18px;
  --canto-redondo: 999px;

  /* ── O BRILHO DA BORDA ─────────────────────────────────────────────────
     O que separava o menu novo do visual de referência não era cor nem
     tamanho: era isto. Cada botão tem uma linha de luz na borda de cima
     (como se a luz do estádio batesse nele) e um halo verde suave por fora.
     Sem isso o botão parece um retângulo chapado colado na foto.

     São três camadas, e as três importam:
       inset 0 1px 0    a luz batendo na aresta de cima
       inset 0 0 Npx    o vidro por dentro
       0 0 Npx          o halo verde por fora                               */
  --brilho-verde:
    inset 0  1px 0    rgba(120,255,175,0.22),
    inset 0  0  18px  rgba(0,200,75,0.07),
    0       0  14px   rgba(0,200,75,0.10);

  --brilho-forte:
    inset 0  1px 0    rgba(150,255,195,0.32),
    inset 0  0  22px  rgba(0,200,75,0.10),
    0       0  20px   rgba(0,200,75,0.18);

  /* So o halo de fora, sem as linhas de dentro. Pra quando a propria arte
     do botao ja traz a borda dela: duas bordas na mesma peca e o que o
     Boss reclamou em 14/09. */
  --brilho-so-fora: 0 0 18px rgba(0,200,75,0.16);

  --brilho-ouro:
    inset 0  1px 0    rgba(255,224,150,0.34),
    inset 0  0  22px  rgba(232,183,58,0.09),
    0       0  20px   rgba(232,183,58,0.16);

  /* ── A BARRA DE BAIXO ──────────────────────────────────────────────────
     Reservado desde já: a navegação por abas é a fatia 1. Quem desenhar
     tela nova precisa deste número pra não esconder conteúdo atrás dela. */
  /* 62 -> 58 em 15/09: o Boss mandou o modelo da barra chapada e pediu
     "levemente menor, mas não muito". */
  --barra-altura: 58px;
  --barra-total: calc(var(--barra-altura) + env(safe-area-inset-bottom, 0px));

  /* ── AS CAMADAS ────────────────────────────────────────────────────────
     Empilhamento num lugar só. Em 14/09 um botão nasceu ATRÁS do modal
     (5000 contra 5200) e o clique parecia morto: é pra isso que serve
     ter a régua escrita. */
  --z-conteudo:   1;
  --z-barra:    900;
  --z-cabecalho: 910;
  --z-modal:   5200;
  --z-aviso:   6000;
  --z-erro:   99999;
}

/* ═══════════════════════════════════════════════════════════════════════
   Daqui pra baixo NÃO entra estilo de tela. Cada tela remodelada ganha o
   seu arquivo em css/telas/, e este aqui guarda só o vocabulário.
   ═══════════════════════════════════════════════════════════════════════ */