/* A Voz do Balcão — design tokens
   Fonte única. A landing (site/) e o preview (design-system/preview.html) consomem este arquivo.
   Racional e regras de uso: design-system/DESIGN.md */

:root {
  /* Marca (briefing §7) */
  --azul-profundo: #092d4a;
  --laranja-ativo: #ff692e;
  --verde-conexao: #00b3a4;
  --off-white: #f4f6f8;

  /* Derivados do azul: superfícies e linhas sobre fundo azul */
  --azul-950: #061f34;
  --azul-800: #0d3a5e;
  --azul-700: #164c75;
  --linha-sobre-azul: rgb(244 246 248 / 0.16);

  /* Derivados para texto sobre fundo claro.
     Laranja e verde da marca não passam AA como texto sobre off-white (2,65 e 2,43),
     então o texto usa estes tons mais escuros. Os originais ficam para preenchimentos. */
  --laranja-texto: #b83e0b; /* 5,19:1 sobre off-white */
  --verde-texto: #00776d; /* 5,02:1 sobre off-white */
  --texto-suave: #4a6075; /* 6,02:1 sobre off-white */
  --texto-suave-sobre-azul: #b9c8d6; /* 8,28:1 sobre azul profundo */
  --linha-sobre-claro: #d5dce3;
  --branco: #ffffff;

  /* Papéis semânticos */
  --bg-claro: var(--off-white);
  --bg-escuro: var(--azul-profundo);
  --texto-claro-fundo: var(--azul-profundo);
  --texto-escuro-fundo: var(--off-white);
  --acao: var(--laranja-ativo);
  --acao-hover: #ff7f4b;
  --acao-texto: var(
    --azul-profundo
  ); /* azul sobre laranja = 4,92:1; branco daria 2,87 */

  /* Tipografia (briefing §7): Manrope nos títulos, Inter no texto */
  --fonte-titulo: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida: mobile 360px -> desktop 1280px */
  --t-display: clamp(2.5rem, 1.6rem + 3.9vw, 4.75rem); /* 40 -> 76 */
  --t-h1: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem); /* 34 -> 56 */
  --t-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem); /* 28 -> 44 */
  --t-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); /* 20 -> 26 */
  --t-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); /* 18 -> 22 */
  --t-corpo: 1.0625rem; /* 17 */
  --t-pequeno: 0.9375rem; /* 15 */
  --t-mini: 0.8125rem; /* 13 */

  --lh-titulo: 1.08;
  --lh-corpo: 1.6;
  --track-titulo: -0.025em;
  --measure: 62ch;

  /* Espaço (base 4) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: clamp(4rem, 3rem + 5vw, 8rem); /* respiro entre seções */

  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --container: 1180px;
  --container-texto: 760px;

  /* Forma: o "balão". Três cantos redondos e um quase reto, o canto da cauda do símbolo. */
  --r-balao: 1.5rem 1.5rem 1.5rem 0.25rem;
  --r-balao-inv: 1.5rem 1.5rem 0.25rem 1.5rem;
  --r-grande: 1.5rem;
  --r-botao: 0.75rem;
  --r-chip: 999px;

  /* Elevação: só onde há sobreposição real */
  --sombra-flutuante:
    0 1px 2px rgb(9 45 74 / 0.12), 0 18px 40px -12px rgb(9 45 74 / 0.35);

  /* Movimento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-curta: 160ms;
  --dur-media: 420ms;
  --dur-longa: 900ms;

  --foco: 3px solid var(--verde-conexao);

  /* Direção editorial e mídia (reconstrução de outubro de 2026) */
  --altura-topo: 100px;
  --altura-topo-mobile: 80px;
  --altura-botao: 60px;
  --logo-largura: 190px;
  --logo-mobile: 156px;
  --cta-largura: 325px;
  --hero-altura: 790px;
  --hero-altura-ampla: 880px;
  --hero-altura-mobile: 730px;
  --t-hero: clamp(3.5rem, 5.6vw, 5.25rem);
  --t-hero-tablet: 3.5rem;
  --t-hero-mobile: clamp(2.25rem, 9.4vw, 4.1rem);
  --track-hero: -0.045em;
  --t-secao: clamp(2rem, 3.5vw, 3rem);
  --t-pilar: clamp(1.6rem, 2.4vw, 2.125rem);
  --t-manifesto: clamp(3rem, 5vw, 4.5rem);
  --t-manifesto-mobile: clamp(2.3rem, 9.5vw, 3.6rem);
  --t-contato: clamp(2.25rem, 4vw, 3.5rem);
  --t-frente: clamp(1.3rem, 1.8vw, 1.625rem);
  --t-faixa-mobile: 0.7rem;
  --t-flecha: 10rem;
  --t-flecha-mobile: 5rem;
  --grafico-altura: 270px;
  --grafico-altura-mobile: 220px;
  --painel-altura: 310px;
  --painel-altura-mobile: 330px;
  --manifesto-altura: 620px;
  --manifesto-altura-mobile: 600px;
  --foto-solucoes-altura: 230px;
  --foto-solucoes-largura: 400px;
  --altura-frente: 100px;
  --efeito-altura: 48px;
  --parallax-folga: 100px;
  --controle-fundo: rgb(6 31 52 / 0.75);
  --hero-overlay:
    linear-gradient(
      90deg,
      rgb(6 31 52 / 0.98) 0%,
      rgb(9 45 74 / 0.92) 28%,
      rgb(9 45 74 / 0.72) 65%,
      rgb(6 31 52 / 0.18) 100%
    ),
    linear-gradient(
      0deg,
      rgb(6 31 52 / 0.85),
      transparent 32%,
      transparent 65%,
      rgb(6 31 52 / 0.7)
    );
  --hero-overlay-mobile:
    linear-gradient(90deg, rgb(6 31 52 / 0.92), rgb(9 45 74 / 0.82)),
    linear-gradient(0deg, rgb(6 31 52 / 0.8), transparent 70%);
  --manifesto-overlay: linear-gradient(
    90deg,
    rgb(6 31 52 / 0.97),
    rgb(9 45 74 / 0.86) 35%,
    rgb(9 45 74 / 0.25) 78%,
    rgb(6 31 52 / 0.15)
  );
  --manifesto-overlay-mobile: linear-gradient(
    90deg,
    rgb(6 31 52 / 0.92),
    rgb(9 45 74 / 0.82)
  );
  /* Ritmo das interações e das imagens */
  --peso-hero: 900;
  --hero-titulo-largura: 1060px;
  --triade-logo-largura: 220px;
  --dur-painel: 560ms;
  --dur-saida: 200ms;
  --dur-grafico: 820ms;
  --dur-acordeao: 620ms;
  --dur-resposta: 640ms;
  --dur-digitacao: 340ms;
  --dur-imagem: 900ms;
  --ease-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-suave: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-elastica: cubic-bezier(0.2, 1.25, 0.4, 1);
  --parallax-limite: 90px;
  --parallax-limite-mobile: 46px;
  --parallax-fator: 0.19;
  --parallax-resposta: 0.12;
  --revelar-distancia: 28px;
  --resposta-distancia: 18px;
  --barra-marketing: 54%;
  --barra-vendas: 73%;
  --barra-experiencia: 92%;
  --barra-marketing-ativa: 64%;
  --barra-vendas-ativa: 83%;
  --barra-experiencia-ativa: 100%;
  --barra-expansao: 1.22;
  --barra-brilho: linear-gradient(
    120deg,
    transparent 10%,
    rgb(255 255 255 / 0.3) 45%,
    transparent 80%
  );
  --sinal-grafico-tamanho: 14px;
  --sinal-grafico-borda: 3px;
  --indicador-altura: 3px;
  --digitando-tamanho: 6px;
  --digitando-ciclo: 700ms;
  --conversa-resposta-altura: 205px;
  --conversa-resposta-altura-mobile: 240px;
  --foto-solucoes-altura-premium: 280px;
  --sombra-barra: 0 -12px 36px rgb(255 255 255 / 0.09);
  --solucoes-overlay:
    linear-gradient(90deg, rgb(6 31 52 / 0.92), rgb(9 45 74 / 0.84)),
    linear-gradient(
      0deg,
      var(--azul-profundo),
      transparent 30%,
      transparent 70%,
      var(--azul-profundo)
    );
}