/* ============================================================
   TOKENS — única fonte de estilo do Brazil Superfoods.
   Valores oficiais do Design System da marca (ApexBrasil × IBRAFE).
   Mudar um token muda o site inteiro. Nenhum #hex ou px de
   espaçamento de layout vive fora daqui.
   ============================================================ */
:root {
    /* --- Primitivas de cor (paleta oficial, Pantone-matched) --- */
    --azul-600:  #2631bc;  /* institucional, cor dominante da marca */
    --azul-700:  #1c2590;  /* hover / pressionado */
    --azul-100:  #e5e6f9;  /* tint claro */
    --amarelo-400:#ffd42e;
    --amarelo-500:#f4c000;  /* sol — acento código-bandeira */
    --amarelo-700:#7a5c00;
    --amarelo-100:#fdf1cc;
    --verde-600: #1fa138;  /* crescimento — acento código-bandeira */
    --verde-700: #146024;
    --verde-100: #dff3e2;
    --preto:     #1d1d1b;
    --branco:    #ffffff;
    --cinza-900: #232323;
    --cinza-700: #4d4d4d;
    --cinza-500: #767676;
    --cinza-300: #c7c7c7;
    --cinza-100: #f0f0ee;
    --cinza-50:  #f8f8f6;

    /* --- Aliases semânticos --- */
    --cor-primaria:       var(--azul-600);
    --cor-primaria-hover: var(--azul-700);
    --cor-primaria-tint:  var(--azul-100);
    --cor-sol:            var(--amarelo-500);
    --cor-sol-tint:       var(--amarelo-100);
    --cor-folha:          var(--verde-600);
    --cor-folha-tint:     var(--verde-100);

    --texto-titulo:     var(--preto);
    --texto-corpo:      var(--cinza-900);
    --texto-suave:      var(--cinza-500);
    --texto-sobre-escuro: var(--branco);
    --texto-sobre-escuro-suave: rgba(255, 255, 255, 0.72);
    --texto-sobre-tint: var(--azul-700);

    --superficie:         var(--branco);   /* fundo padrão da página */
    --superficie-afundada:var(--cinza-50);  /* seções alternadas */
    --superficie-cartao:  var(--branco);
    --superficie-escura:  var(--azul-600);  /* faixas institucionais */
    --superficie-verde:   var(--verde-600); /* faixa de fechamento (CTA final) */
    --superficie-creme:   #f3f1ec;           /* fundo quente do hero editorial */

    --borda-sutil:  var(--cinza-300);
    --borda-clara:  var(--cinza-100);
    --borda-escura: rgba(255, 255, 255, 0.22);
    --foco:         var(--azul-600);

    /* --- Tipografia (Viga display + Plus Jakarta Sans corpo).
       Noto Sans SC = fallback CJK padrão/segurança (Chinês Simplificado).
       Traditional troca p/ Noto Sans TC no bloco :lang() no fim do arquivo. --- */
    --fonte-display: 'Viga', 'Noto Sans SC', system-ui, sans-serif;
    --fonte-texto:   'Plus Jakarta Sans', 'Noto Sans SC', system-ui, -apple-system, sans-serif;

    --texto-hero:      clamp(2.5rem, 5.5vw, 4.25rem);
    --texto-h1:        clamp(2.2rem, 4.5vw, 3.5rem);
    --texto-h2:        clamp(1.8rem, 3.4vw, 2.6rem);
    --texto-h3:        clamp(1.25rem, 2vw, 1.6rem);
    --texto-numero:    clamp(2.6rem, 6vw, 4.4rem);
    --texto-corpo-lg:  clamp(1.05rem, 1.4vw, 1.25rem);
    --texto-corpo-md:  1rem;
    --texto-peq:       0.875rem;
    --texto-eyebrow:   0.8125rem;

    --peso-corpo:  400;
    --peso-medio:  500;
    --peso-semi:   600;
    --peso-forte:  700;
    --entrelinha-titulo: 1.08;
    --entrelinha-corpo:  1.6;
    --tracking-eyebrow:  0.14em;

    /* --- Espaçamento (escala base 4px da marca) --- */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
    --space-9: 96px; --space-10: 128px;

    --espaco-secao:  clamp(4rem, 9vw, 8rem);
    --espaco-bloco:  clamp(2rem, 5vw, 4rem);
    --gap:           clamp(1rem, 2.4vw, 2rem);
    --largura-max:   1200px;
    --largura-texto: 62ch;
    --padding-lat:   clamp(1.25rem, 5vw, 3rem);

    /* --- Raio (espelha o arredondado da própria Viga) --- */
    --raio-p:    6px;
    --raio-m:    10px;
    --raio-g:    16px;
    --raio-pill: 999px;
    --raio-assinatura: clamp(3rem, 7vw, 5.5rem); /* o canto "gota" dos cartões da colagem */

    /* --- Agenda global: cartões split com foto sangrada na borda.
       Foto é coluna de grid colada nas bordas; overflow hidden do
       cartão recorta nos cantos arredondados --- */
    --pad-agenda:  var(--space-6);            /* 32px internos do bloco de texto */
    --foto-evento: clamp(200px, 48%, 320px);  /* painel de foto dos cartões de evento */
    --foto-summit: clamp(300px, 44%, 520px);  /* painel panorâmico do summit */

    /* --- Mapa de contato (moldura do iframe do Google Maps, /contact) --- */
    --altura-mapa: clamp(320px, 40vw, 460px);

    /* --- Vitrine de produtos (/products): a grade é auto-fill, então a
       largura mínima do cartão é o que define quantas colunas cabem --- */
    --card-produto: 264px;
    --foto-produto: 4 / 3;   /* recorte do original 400x546, sem upscale */

    /* --- Diretório de fornecedores (/suppliers): card menor que o de produto,
       o conteúdo é logo + nome + local, sem foto grande --- */
    --card-fornecedor: 280px;

    /* --- Produtos fornecidos no perfil do fornecedor: card compacto
       (foto + tag), a grade cresce à vontade além de 3 itens --- */
    --card-produto-forn: 200px;
    --card-galeria-forn: 220px;

    /* --- Mosaico de artigos (/market-insights): card editorial foto + texto,
       grade auto-fill como a de produtos/fornecedores --- */
    --card-artigo: 300px;

    /* --- Colagem do hero (lâminas de cor e marcas da identidade) --- */
    --branco-veu:     rgba(255, 255, 255, 0.18); /* lâmina translúcida sobre o azul */
    --desloca-lamina: 14px;                       /* offset da lâmina atrás do cartão */
    --dur-flutuar:    7s;
    --dur-balanco:    5.5s;

    /* --- Sombra (elevação suave, sem borda dura) --- */
    --sombra-p: 0 1px 3px rgba(29, 29, 27, 0.08);
    --sombra-m: 0 4px 16px rgba(29, 29, 27, 0.10);
    --sombra-g: 0 12px 32px rgba(29, 29, 27, 0.14);

    /* --- Movimento (contido: hover/press e reveals discretos) --- */
    --ease:            cubic-bezier(0.4, 0, 0.2, 1);
    --dur-rapida:      120ms;
    --dur-base:        200ms;
    --transicao-rapida: 0.2s var(--ease);
    --transicao-padrao: 0.25s var(--ease);

    --z-cabecalho: 100;
    --altura-cabecalho: 73px; /* logo 42px + padding 0.9rem topo/base, usado p/ hero preencher a viewport útil */
}

/* ============================================================
   FONTE POR REGIÃO — sobrescreve os tokens de tipografia conforme
   o idioma da página (atributo lang do <html>). Como todo o CSS usa
   var(--fonte-display) / var(--fonte-texto), o site inteiro herda.
   Padrão (inclui zh genérico) = Noto Sans SC, já definido em :root.
   Chinês Tradicional (Taiwan / Hong Kong / Macau) troca p/ Noto Sans TC.
   ============================================================ */
:root:lang(zh-Hant),
:root:lang(zh-TW),
:root:lang(zh-HK),
:root:lang(zh-MO) {
    --fonte-display: 'Viga', 'Noto Sans TC', system-ui, sans-serif;
    --fonte-texto:   'Plus Jakarta Sans', 'Noto Sans TC', system-ui, -apple-system, sans-serif;
}

/* Chinês Simplificado explícito (redundante com o padrão, mas deixa a intenção clara) */
:root:lang(zh-Hans),
:root:lang(zh-CN),
:root:lang(zh-SG) {
    --fonte-display: 'Viga', 'Noto Sans SC', system-ui, sans-serif;
    --fonte-texto:   'Plus Jakarta Sans', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
}