/* ==========================================================================
   Bilbao — Design Tokens
   Extraídos das variáveis do Figma (arquivo Bilbao). Fonte única de verdade
   para cor, tipografia e espaçamento. Não hardcode valores fora daqui.
   ========================================================================== */

:root {
  /* --- Cores: Brand --- */
  --c-brand-900: #532b1e; /* marrom escuro — rodapé, seções destaque */
  --c-brand-500: #de2524; /* vermelho — CTAs, badges, divisores */
  --c-brand-300: #eeeeee; /* cinza claro — texto links rodapé, bg newsletter */
  --c-brand-100: #c3bcb6;
  --c-brand-0:   #cfc3bc; /* taupe — títulos de coluna no rodapé */

  /* --- Cores: Neutras --- */
  --c-white:      #ffffff;
  --c-neutral-0:   #ebebeb; /* bordas sutis */
  --c-neutral-100: #d1d1d1;
  --c-neutral-500: #818181;
  --c-neutral-700: #707070; /* placeholders, texto secundário */
  --c-neutral-900: #2a2a2a; /* texto principal */
  --c-field-bg:    #f0f0f0; /* fundo do campo de busca */

  /* --- Cores: Bandeiras de pagamento (referência) --- */
  --c-pay-visa:       #1434cb;
  --c-pay-mastercard: #f79e1b;
  --c-pay-paypal:     #179bd7;
  --c-pay-gpay:       #e94235;

  /* --- Aliases semânticos --- */
  --c-text:        var(--c-neutral-900);
  --c-text-muted:  var(--c-neutral-700);
  --c-bg:          var(--c-white);
  --c-border:      var(--c-neutral-0);
  --c-accent:      var(--c-brand-500);

  /* --- Tipografia: famílias --- */
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Display serifada elegante usada em títulos espaçados (ex.: "NÃO PERCA NOSSAS NOVIDADES") */
  --font-display: "Contralto Small", "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* --- Tipografia: escala (size / line-height / letter-spacing) ---
     Nomes espelham os estilos do Figma. */
  --t-title-lg:      600 34px/1.32 var(--font-sans);   /* Title/large-regular */
  --t-title-sm:      500 20px/1.32 var(--font-sans);   /* Title/small-bold, ls 1px */
  --t-body-lg:       400 18px/1.52 var(--font-sans);
  --t-body-md:       400 16px/1.52 var(--font-sans);
  --t-body-sm:       400 14px/1.42 var(--font-sans);
  --t-body-xs:       400 12px/1.42 var(--font-sans);
  --t-label-lg-bold: 600 16px/1 var(--font-sans);      /* ls 2px */
  --t-label-lg:      400 16px/1 var(--font-sans);
  --t-label-md-bold: 700 14px/1 var(--font-sans);      /* ls 2px */
  --t-label-md:      400 14px/1 var(--font-sans);      /* ls 2px */
  --t-label-sm-bold: 700 10px/1 var(--font-sans);      /* ls 2px */
  --t-label-sm:      400 10px/1 var(--font-sans);      /* ls 2px */

  /* letter-spacings recorrentes
     No Figma o "letterSpacing: 2" é 2% (≈0.28px em 14px), não 2px. */
  --ls-label: 0.02em; /* labels / nav / botões (2%) */
  --ls-nav:   0.02em; /* nav 14px */
  --ls-display: 0.3em; /* títulos display espaçados (px explícito no Figma) */

  /* --- Layout --- */
  --container: 1358px;      /* largura de conteúdo padrão (rodapé, seções internas) */
  --container-wide: 1720px; /* header e faixas full-bleed (px-100 no design) */
  --frame: 1920px;          /* largura do design (limite máximo do quadro) */
  --gutter: 100px;          /* respiro lateral em telas grandes */
  /* Inset até a borda do container 1358 — alinha conteúdo de seções
     full-bleed (feature/story) à mesma coluna do resto do site. */
  --edge: max(24px, calc((100vw - var(--container)) / 2));

  /* --- Alturas fixas do chrome --- */
  --header-row1: 98px;
  --header-row2: 64px;

  /* --- Raios / sombras --- */
  --radius-pill: 62px;
  --radius-sm: 4px;

  /* --- Transições --- */
  --ease: 0.25s ease;
}