/* ==========================================================================
   VARIABLES.CSS — Design tokens PDR Pneus
   Único arquivo que muda para criar variação de tema.

   Os azuis foram medidos no próprio arquivo de vídeo do hero, para a emenda
   entre o <video> e o fundo da página ser invisível. Ao trocar o vídeo,
   reamostre (o procedimento está no README).
   ========================================================================== */

:root {

    /* ---------- Base ----------
       Medidos no vídeo pdr-pneu-scroll.mp4:
       borda superior RGB(4,10,19), borda inferior RGB(4,10,17).
       As laterais são mais claras, RGB(6,16,27), porque o arquivo tem um
       brilho atrás do pneu — daí --noite-flanco existir separado. */
    --noite:           #040A13;
    --noite-baixo:     #040A11;
    --noite-flanco:    #06101B;
    --cetim:           #0B1526;
    --cetim-2:         #12203F;
    --line:            rgba(233,239,250,.13);
    --line-forte:      rgba(233,239,250,.26);

    /* ---------- Texto ---------- */
    --text:            #E9EFFA;
    --text-muted:      rgba(233,239,250,.62);
    --text-dim:        rgba(233,239,250,.38);

    /* ---------- Marca PDR ----------
       Medidos com conta-gotas no logo oficial, não estimados.

       As duas cores têm papel fixo e não se misturam:

         AMARELO = ação. Só onde se clica — botão, hover de link, anel de
                   foco. Antes ele aparecia em nove lugares diferentes, e uma
                   cor com nove papéis deixa de ser detalhe e vira a segunda
                   cor da marca. Era por isso que a página lia como azul e
                   amarelo e lembrava outras identidades.

         VERDE   = origem e progresso. Barra do hero, pontos do mapa, medida
                   do pneu, marcadores da lista, confirmação de envio. Nenhum
                   deles é ação, e todos falam de onde a coisa vem ou de
                   quanto já andou. */
    --pdr-verde:       #189849;
    --pdr-amarelo:     #F7C21F;
    --pdr-azul:        #1E396B;

    --acao:            var(--pdr-amarelo);
    --acao-hover:      #FFD645;
    --tinta:           #0A1020;   /* texto sobre amarelo */

    /* O verde do logo dá contraste 5,37 sobre o fundo: passa para
       preenchimento e texto médio, mas fica apertado em fio de 1px e legenda
       pequena. Esta é a mesma cor mais clara, com contraste 7,64. */
    --origem:          var(--pdr-verde);
    --origem-claro:    #22B85C;

    /* O azul do logo (#1E396B) dá contraste 1,75 sobre o fundo — ilegível.
       Este é o mesmo azul clareado até 7,70, praticamente igual ao verde,
       para as três cores da marca terem o mesmo peso na tela. */
    --marca-azul:      #6FA0FF;

    /* ---------- Tipografia ----------
       Display: Barlow Condensed — condensada e itálica, é a grotesca que mais
                se aproxima do desenho do logo PDR sem tentar imitá-lo.
       Corpo:   Inter — neutra, legível em corpo pequeno sobre fundo escuro. */
    --f-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --f-corpo:   "Inter", system-ui, -apple-system, sans-serif;

    /* Escala com salto grande de propósito: não existe tamanho intermediário
       entre título e corpo — o contraste é o recurso de design. */
    --t-hero:    clamp(2.6rem, 5.4vw, 4.6rem);
    --t-secao:   clamp(2.2rem, 5vw, 3.8rem);
    --t-destaque:clamp(1.9rem, 3.4vw, 2.8rem);
    --t-item:    clamp(1.15rem, 2vw, 1.5rem);
    --t-mini:    .85rem;

    /* ---------- Ritmo ---------- */
    --gap:       clamp(1rem, 2.5vw, 2rem);
    --secao-y:   clamp(4.5rem, 12vh, 9rem);
    --wrap:      1240px;
    --wrap-pad:  clamp(1.25rem, 5vw, 3.5rem);
    --topo-h:    76px;

    /* ---------- Movimento ---------- */
    --ease:      cubic-bezier(.22,.61,.36,1);
    --dur:       .5s;

    /* ---------- Hero ----------
       --hero-trilho define quanta rolagem cabe uma volta do pneu. Mais alto,
       giro mais lento. Abaixo de 200vh a volta fica apressada demais.
       --hero-escala é a altura do vídeo em relação ao palco: acima de 100%
       de propósito, para as bordas do arquivo ficarem fora da tela. */
    --hero-trilho: 300vh;
    --hero-escala: 128%;
    --hero-fade:   9%;
}