/* =============================================================
   Tradição Ferragens — Design tokens
   Fonte única de cor, tipo, espaço, raio, sombra e movimento.
   Documentação: /opt/tradicao/DESIGN.md
   ============================================================= */

/* Archivo servida pelo próprio site e pré-carregada no <head> (antes vinha do Google Fonts e
   chegava segundos depois: a troca de fonte encolhia as seções e, no iPhone, a página
   "pulava" durante a rolagem). Arquivos baixados do Google Fonts em 26/10/2026 (v25). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fontes/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fontes/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Primitivos: azul da marca (base #0952AF) ---------- */
  --azul-950: #04193a;
  --azul-900: #062a5e;
  --azul-800: #073c85;
  --azul-700: #0847a0;
  --azul-600: #0952af; /* cor principal da marca */
  --azul-500: #2d6fcb;
  --azul-400: #5b91db;
  --azul-200: #bfd5f3;
  --azul-100: #e3edfb;
  --azul-50:  #f2f6fd;

  /* ---------- Primitivos: amarelo e vermelho do logo ---------- */
  --amarelo-500: #fcb900;
  --amarelo-400: #ffc933;
  --amarelo-100: #fff4cc;
  --vermelho-600: #c8161d;
  --vermelho-500: #e01b22;

  /* ---------- Primitivos: neutros (levemente frios) ---------- */
  --tinta-950: #0b1220;
  --tinta-900: #0f1724;
  --tinta-700: #334155;
  --tinta-500: #5b6779;
  --tinta-300: #cbd5e1;
  --tinta-200: #e2e8f0;
  --tinta-100: #eef2f7;
  --tinta-50:  #f6f8fb;
  --branco: #ffffff;

  /* ---------- Primitivos: campanha escura (Black Friday) ---------- */
  --preto-950: #08080a;
  --preto-900: #0e0f12;
  --preto-800: #17181d;
  --preto-700: #24262d;
  --preto-500: #5d6170;

  --whatsapp: #25d366;
  --whatsapp-escuro: #0e7a40;

  /* ---------- Semânticos ---------- */
  --cor-fundo: var(--branco);
  --cor-fundo-suave: var(--tinta-50);
  --cor-fundo-marca: var(--azul-900);
  --cor-superficie: var(--branco);
  --cor-texto: var(--tinta-900);
  --cor-texto-suave: var(--tinta-500);
  --cor-titulo: var(--azul-900);
  --cor-borda: var(--tinta-200);
  --cor-primaria: var(--azul-600);
  --cor-primaria-hover: var(--azul-700);
  --cor-destaque: var(--amarelo-500);      /* CTA principal, barras, números */
  --cor-destaque-hover: var(--amarelo-400);
  --cor-texto-sobre-destaque: var(--azul-950);
  --cor-alerta: var(--vermelho-600);       /* selos, "nova unidade", tags */
  --cor-foco: var(--amarelo-500);

  /* Texto sobre fundos azuis/escuros */
  --cor-texto-inverso: var(--branco);
  --cor-texto-inverso-suave: rgba(255, 255, 255, 0.74);

  /* ---------- Tipografia ---------- */
  --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* eixo de largura (wdth) do Archivo: títulos levemente expandidos */
  --largura-titulo: 112;
  --largura-texto: 100;

  --texto-display: clamp(2.5rem, 1.55rem + 4.2vw, 4.75rem);
  --texto-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
  --texto-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --texto-lg: 1.125rem;
  --texto-base: 1rem;
  --texto-sm: 0.875rem;
  --texto-xs: 0.8125rem;

  --peso-texto: 400;
  --peso-medio: 500;
  --peso-forte: 700;
  --peso-titulo: 800;

  --altura-titulo: 1.04;
  --altura-texto: 1.6;
  --tracking-titulo: -0.02em;
  --tracking-eyebrow: 0.12em;

  /* ---------- Espaço (base 4px) ---------- */
  --esp-1: 0.25rem;  /* 4 */
  --esp-2: 0.5rem;   /* 8 */
  --esp-3: 0.75rem;  /* 12 */
  --esp-4: 1rem;     /* 16 */
  --esp-5: 1.5rem;   /* 24 */
  --esp-6: 2rem;     /* 32 */
  --esp-7: 3rem;     /* 48 */
  --esp-8: 4rem;     /* 64 */
  --esp-9: 6rem;     /* 96 */
  --esp-10: 8rem;    /* 128 */
  --secao-y: clamp(4rem, 2.6rem + 6vw, 8rem);

  /* ---------- Layout ---------- */
  --largura-max: 1200px;
  --largura-texto-max: 62ch;
  --gutter: 16px;
  --altura-header: 60px;
  --altura-barra-cta: 76px; /* barra fixa do WhatsApp no celular */

  /* ---------- Raio ---------- */
  --raio-sm: 8px;
  --raio-md: 14px;
  --raio-lg: 20px;
  --raio-xl: 28px;
  --raio-pill: 999px;

  /* ---------- Sombra (tingida de azul) ---------- */
  --sombra-1: 0 1px 2px rgba(6, 42, 94, 0.06), 0 1px 1px rgba(6, 42, 94, 0.04);
  --sombra-2: 0 6px 18px -6px rgba(6, 42, 94, 0.16), 0 2px 6px rgba(6, 42, 94, 0.06);
  --sombra-3: 0 24px 48px -16px rgba(6, 42, 94, 0.28);
  --sombra-cta: 0 10px 24px -8px rgba(252, 185, 0, 0.55);

  /* ---------- Movimento ---------- */
  --dur-1: 150ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 700ms;
  --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-entra-sai: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Camadas ---------- */
  --z-header: 50;
  --z-barra-cta: 60;
  --z-modal: 100;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; --altura-header: 80px; }
}

/* =============================================================
   Temas de campanha — aplicados com [data-tema] na seção da
   campanha (e na faixa de aviso do topo). Trocar de campanha =
   trocar o tema em site/conteudo/campanha.js.
   ============================================================= */
[data-tema="black"] {
  --camp-fundo: var(--preto-900);
  --camp-fundo-2: var(--preto-800);
  --camp-borda: var(--preto-700);
  --camp-texto: var(--branco);
  --camp-texto-suave: rgba(255, 255, 255, 0.7);
  --camp-destaque: var(--amarelo-500);
  --camp-texto-sobre-destaque: var(--preto-950);
  --camp-alerta: var(--vermelho-500);
}
[data-tema="azul"] {
  --camp-fundo: var(--azul-900);
  --camp-fundo-2: var(--azul-800);
  --camp-borda: var(--azul-700);
  --camp-texto: var(--branco);
  --camp-texto-suave: rgba(255, 255, 255, 0.74);
  --camp-destaque: var(--amarelo-500);
  --camp-texto-sobre-destaque: var(--azul-950);
  --camp-alerta: var(--vermelho-500);
}
[data-tema="claro"] {
  --camp-fundo: var(--amarelo-100);
  --camp-fundo-2: var(--branco);
  --camp-borda: #f3dd8a;
  --camp-texto: var(--azul-950);
  --camp-texto-suave: var(--tinta-700);
  --camp-destaque: var(--azul-600);
  --camp-texto-sobre-destaque: var(--branco);
  --camp-alerta: var(--vermelho-600);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
}

/* =============================================================
   Acréscimos da construção da landing page (nada acima foi renomeado)
   ============================================================= */
:root {
  --altura-aviso: 36px;
  --alvo-toque: 44px;
  --altura-botao: 52px;
  --altura-campo: 52px;
  --barra-largura: 64px;
  --barra-altura: 6px;
  --linha-inversa: rgba(255, 255, 255, 0.14);
  --anel-foco-campo: 0 0 0 4px rgba(252, 185, 0, 0.4);
  --camp-faixa-altura: 12px;
  --camp-faixa-passo: 14px;
  --dur-queda: 700ms;
  --ease-queda: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-marquee: 40s;
  --altura-linha-lista: 56px;
  --dur-veu: 200ms;
  --dur-saida: 160ms;
  --dur-numero: 360ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-queda: 0ms; --dur-veu: 0ms; --dur-saida: 0ms; --dur-numero: 0ms; }
}