/* ===========================================================================
   Design tokens — Promoção Você de Bravo (SCPC nº 2026/06680)
   ===========================================================================
   APENAS custom properties. Nenhuma regra de estilo aqui (`VDB-060`).

   Fonte do desenho: o Figma do Marketing ("SITE AVELLOZ (bia att)", seção
   PROMOÇÃO VOCÊ DE BRAVO) — ver docs/PLANO_REDESIGN_FIGMA.md §1. Os valores
   abaixo vêm de lá; o que NÃO vem de lá está dito em cada linha.

   ⚠️ Escala: o frame desktop do Figma tem 1700px de largura e o texto de corpo
   dele tem 24px. Numa tela de 1280px isso é 18px — o fator ×0,75 está aplicado
   em todo tamanho abaixo. O frame mobile (1080px) NÃO é uma tela de 1080px: é o
   desenho de 360px ampliado, e o texto de lá, dividido por 3, ficaria ilegível.
   No celular os tamanhos param nos pisos de leitura (16px de corpo).
   =========================================================================== */

:root {
    /* ---- Marca (Figma) ---- */
    --brand: #F04C23;          /* laranja do Figma: botões, títulos, bordas, barras da FAQ */
    --brand-hover: #D83F1B;
    /* ⚠️ Contraste (decisão E do plano). Branco sobre #F04C23 dá 3,65:1 — passa
       só para texto GRANDE (≥ 24px, ou ≥ 18,66px em negrito). Onde a superfície
       laranja carrega texto PEQUENO (menu, rodapé, cards de apoio, prêmios), o
       fundo é este tom, 4,5:1, quase indistinguível a olho. Se o Marketing
       preferir o tom exato ao AA, é esta linha: `--brand-fundo: var(--brand)`. */
    --brand-fundo: #D83F1B;
    /* O mesmo raciocínio no sentido contrário: laranja como COR DE TEXTO pequeno
       sobre branco. #F04C23 dá 3,65:1; este dá 5,2:1. Títulos continuam no
       laranja do Figma, porque são texto grande. */
    --brand-texto: #C73A14;

    --faixa: #4C3439;          /* faixa do contador, abaixo do hero (Figma) */
    --branco: #FFFFFF;
    --preto: #000000;

    --texto: #444444;          /* texto corrido neutro (consentimentos, notas) */
    --texto-suave: #676767;    /* placeholder, rótulos secundários — 4,9:1 sobre #EEE */
    --campo-bg: #EEEEEE;       /* fundo dos campos, sem borda (Figma) */
    --borda: #676767;          /* caixa de verificação, upload (Figma) */
    --borda-suave: #E2E2E2;    /* fios de tabela e divisórias — não está no Figma */
    --superficie: #FFFFFF;
    --superficie-2: #F7F7F7;   /* fundo de bloco dentro de card — não está no Figma */

    /* Sobre fundo laranja: texto e bordas brancas translúcidas. */
    --sobre-brand: #FFFFFF;
    --sobre-brand-borda: rgba(255, 255, 255, .55);
    --sobre-brand-suave: rgba(255, 255, 255, .14);

    /* ---- Estados ---- (não estão no Figma; mantidos do site, com contraste AA) */
    --warn-bg: #FFF3E0;
    --warn-fg: #7A4A00;
    --warn-fg-strong: #9A3C08;
    --ok-bg: #E7F6EC;
    --ok-fg: #17703D;
    --risk-bg: #FDE8E8;
    --risk-fg: #B21F1F;

    --forca-fraca: #B21F1F;
    --forca-media: #B86A0B;
    --forca-boa: #1E8E4E;
    --forca-forte: #12703C;

    --skeleton-1: #E8E8E8;
    --skeleton-2: #F4F4F4;
    --overlay: rgba(20, 12, 10, .6);
    --sombra-rolagem: rgba(0, 0, 0, .12);

    /* ---- Cards de prêmio ---- */
    --losango-premio: #9E9E9E;   /* o losango antes do nome do prêmio (Figma) */

    /* ---- Forma (Figma) ---- */
    --radius: 10px;            /* campos, cards, caixas */
    --radius-sm: 5px;          /* caixas do contador */
    --radius-pilula: 30px;     /* botões */

    /* ---- Tipografia ----
       Museo Sans é a fonte do Figma e é COMERCIAL: entra quando o Marketing
       entregar os `.woff2` com licença web (decisão A). Até lá vale a Mulish,
       livre (OFL), hospedada em assets/fonts — desenho e métrica próximos, e os
       mesmos pesos (500, 700 e 900, com itálico). */
    --fonte: 'Museo Sans', 'Mulish', 'Segoe UI', system-ui, sans-serif;

    /* Estilos nomeados no Figma, já na escala ×0,75 (máximo) e com piso de leitura. */
    --fs-titulo: clamp(30px, 4.2vw, 48px);       /* "Título 1": 900 itálico, caixa alta */
    --fs-titulo-card: clamp(28px, 3.4vw, 44px);  /* título dos cards laranja */
    --fs-subtitulo: clamp(20px, 2vw, 24px);      /* "Subtítulo": 700 itálico (abas, "Dados da compra") */
    --fs-corpo: clamp(16px, 1.45vw, 18px);       /* "Corpo texto" e "Corpo destaque" */
    --fs-pequeno: clamp(13px, 1.1vw, 14px);
    /* Botão: ≥ 19px em negrito é "texto grande" na WCAG, e é isso que deixa o
       branco sobre o laranja exato do Figma passar no contraste. */
    --fs-botao: clamp(19px, 1.65vw, 21px);
    --fs-nav: clamp(14px, 1.12vw, 17px);

    /* ---- Escala fluida ----
       `clamp()` é um VALOR, então continua sendo custom property e a regra do
       `VDB-060` segue de pé: nenhuma regra de estilo neste arquivo.

       ⚠️ NÃO existe token de breakpoint aqui. `@media (max-width: var(--x))` não
       funciona em navegador nenhum — os valores 640 e 960 ficam literais no CSS,
       com a tabela que os justifica no topo da seção responsiva do components.css. */

    /* Ritmo de página */
    --secao-y:       clamp(40px, 6.5vw, 72px);
    --secao-y-solta: clamp(48px, 8.4vw, 88px);
    --secao-y-topo:  clamp(28px, 5vw, 56px);
    --secao-y-faixa: clamp(24px, 4vw, 40px);
    --wrap-x:        clamp(16px, 4.5vw, 64px);
    --wrap-max:      1280px;

    /* Superfícies */
    --card-p:     clamp(20px, 3.2vw, 40px);
    --card-p-sm:  clamp(16px, 2.2vw, 24px);
    --painel-p-y: clamp(18px, 3.3vw, 26px);
    --painel-p-x: clamp(18px, 3.5vw, 28px);
    --doc-p-y:    clamp(22px, 4.5vw, 36px);
    --doc-p-x:    clamp(18px, 5vw, 40px);
    --modal-p:    clamp(20px, 4vw, 28px);

    /* Grades */
    --grade-gap:    clamp(14px, 2.5vw, 24px);
    --grade-gap-lg: clamp(24px, 4.2vw, 48px);

    /* Campos (Figma: 60px no frame de 1700 → 45px) */
    --campo-altura: 45px;

    /* Interação */
    --alvo-toque:    44px;   /* WCAG 2.5.5; o piso de 2.5.8 é 24px */
    --altura-header: clamp(56px, 5.9vw, 76px);

    /* ---- Elevação ---- */
    --sombra-header: 0 2px 12px rgba(0, 0, 0, .16);
    --sombra-banner: 0 -4px 18px rgba(0, 0, 0, .22);
}