/* ==========================================================================
   TOKENS v2 — COMPLA CLUB
   As decisões de marca do redesign. Único arquivo que define cor e tipo.
   O porquê de cada escolha está em REFERENCIAS-REDESIGN.md.
   ========================================================================== */

:root {
    /* --- Marca ---
       Os dois valores continuam os medidos do perfil @clubecompla: o vermelho
       das capas de destaque e o marinho do lettering do logo. O que mudou é o
       uso: o vermelho virou acento e NUNCA é fundo de seção. */
    --vermelho:        #AF1D1D;
    --vermelho-vivo:   #D62828;   /* só para hover e para o número da parcela */
    --marinho:         #0E2135;

    /* O marinho puxado para baixo, quase preto. Existe só para a barra do topo
       e para o palco das categorias, que precisam de fundo escuro sem virar
       preto puro nem repetir o marinho da seção .clube. */
    --marinho-profundo: #0A1624;

    /* --- Neutros ---
       Cinza-concreto frio, não bege. Bege quente é o fundo padrão de página
       gerada e briga com o marinho. */
    --tinta:           #101E2C;   /* todo texto escuro */
    --tinta-fraca:     #5A6A7A;   /* texto de apoio */
    --papel:           #FFFFFF;   /* palco do produto */
    --concreto:        #E9EBEE;   /* seção alternada */
    --concreto-fundo:  #F4F6F8;   /* fundo geral, um degrau acima do branco */
    --traco:           #C9CFD6;   /* réguas finas */
    --traco-escuro:    rgba(255,255,255,.18);
    --sobre-escuro:    #FFFFFF;
    --sobre-escuro-fraco: rgba(255,255,255,.68);

    /* --- Tipografia ---
       Uma família só, Archivo variável, em dois ajustes bem distantes.
       Títulos condensados e pesados (cara de placa e de lettering de tanque),
       corpo na largura normal, que lê bem em parágrafo. */
    --fonte:           'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Eixos de variação. Aplicados via font-variation-settings. */
    --wdth-titulo:     78;
    --wdth-corpo:      100;

    /* Escala fluida. Não crie override de font-size por breakpoint. */
    --fs-mega:         clamp(42px, 5.8vw, 72px);   /* título do hero */
    --fs-numero:       clamp(38px, 5.2vw, 66px);   /* a parcela */
    --fs-h2:           clamp(30px, 4vw, 52px);
    --fs-h3:           clamp(19px, 1.9vw, 24px);
    --fs-lead:         clamp(17px, 1.5vw, 21px);
    --fs-corpo:        clamp(15.5px, 1.05vw, 17px);
    --fs-micro:        13px;

    /* Um degrau acima do marinho, para o topo dos blocos em relevo (a faixa
       "Sem CNH" e o painel do menu). E um abaixo do profundo, para a aresta
       de baixo desses blocos, que é o que dá a sensação de espessura. */
    --marinho-claro:   #1A3352;
    --marinho-aresta:  #050C15;

    /* --- Forma ---
       Dois raios: o pequeno para botão, selo e régua; o de card para tudo que
       flutua sobre a página (foto de categoria, palco de produto, faixa de
       benefícios, painel do menu, tabela). Não invente um terceiro. */
    --raio:            4px;
    --raio-card:       18px;

    /* --- Profundidade ---
       Adicionado em 09/09/2026, quando o Arthur pediu o site "com profundidade
       e detalhes em 3D". Três sombras, do mais leve ao mais fundo, e um brilho
       de topo que simula luz batendo na aresta de cima. Use sempre estas;
       sombra inventada em cada componente é o que faz a página parecer feita
       por três pessoas. */
    --sombra-leve:     0 1px 2px rgba(16, 30, 44, .06), 0 10px 26px -14px rgba(16, 30, 44, .22);
    --sombra-media:    0 2px 4px rgba(16, 30, 44, .06), 0 20px 44px -18px rgba(16, 30, 44, .32);
    --sombra-funda:    0 34px 70px -28px rgba(6, 14, 24, .75);
    --sombra-escura:   0 24px 60px -20px rgba(0, 0, 0, .6);   /* sobre fundo escuro */
    --sombra-vermelha: 0 12px 26px -10px rgba(175, 29, 29, .70);
    --brilho-topo:     inset 0 1px 0 rgba(255, 255, 255, .55);

    /* Orbs de cor que dão ao vidro algo para refratar na seção .clube. */
    --orb-vermelho:    rgba(214, 40, 40, .38);   /* mais que isso vira fundo vermelho */
    --orb-azul:        rgba(64, 128, 230, .42);

    /* --- Liquid Glass ---
       O material da barra do topo, da pílula "Menu", do painel e do card da
       seção .clube. Vidro é camada de controle flutuando sobre conteúdo: não
       use em corpo de texto, tabela nem fundo de seção. A receita completa
       está na skill design-de-site. */
    --vidro-fundo:        rgba(255, 255, 255, .08);
    --vidro-fundo-hover:  rgba(255, 255, 255, .16);
    --vidro-borda:        rgba(255, 255, 255, .22);
    --vidro-brilho:       rgba(255, 255, 255, .55);
    --vidro-blur:         18px;
    /* Fundo sólido usado quando o navegador não tem backdrop-filter ou o
       usuário pediu menos transparência. */
    --vidro-solido:       rgba(10, 22, 36, .94);

    /* --- Espaço --- */
    --secao-y:         clamp(56px, 7vw, 104px);
    --container:       1240px;
    --calha:           clamp(20px, 4vw, 32px);

    /* Altura da barra do topo. O header é fixo e não empurra nada, então este
       valor é o padding-top do hero. Mexeu num, mexa no outro. */
    --topo-altura:     clamp(72px, 7vw, 96px);
    /* Quanto o chanfro diagonal avança na horizontal. Zero deixa a barra reta. */
    --topo-chanfro:    34px;

    /* --- Movimento --- */
    --ease:            cubic-bezier(.4, 0, .2, 1);
    --dur:             .25s;
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur: .01ms; }
}