/* PerformanceCo — tokens da marca.
   Fonte única dos valores. O porquê de cada um está em BRAND.md.
   Fontes: Literata + Schibsted Grotesk (OFL). No site, hospedar os .woff2 localmente;
   este arquivo não carrega fonte nenhuma. */

:root {
  /* Cor — base. O creme domina; a tinta escreve. */
  --cor-creme: #FDFFF8;          /* fundo da página */
  --cor-superficie: #F3F7EB;     /* faixa, painel, palco */
  --cor-superficie-2: #E0EADD;   /* pill neutra, estado hover */
  --cor-linha: #DCE2D7;          /* hairline de 1px */
  --cor-linha-forte: #D1DECD;
  --cor-tinta: #151414;          /* texto, botão, fundo escuro, logo */
  --cor-tinta-2: #272C2B;        /* superfície sobre fundo escuro */
  --cor-texto-2: #5A5A5A;        /* texto secundário (6,9:1 no creme) */
  --cor-texto-3: #767676;        /* legenda: 4,5:1 só no creme/branco; na superfície (4,2:1) usar texto-2 */
  --cor-branco: #FFFFFF;

  /* Cor — etapas. Pastéis funcionais: cada etapa do sistema tem uma cor e só uma.
     Usar em pill, quadro de ícone e ilustração. Nunca em texto.
     Mesmo papel em toda família: 1 bolha clara · 2 pill · 3 tecla/ícone · 4 borda 3D. */
  --cor-encontrado-1: #E0F8F2;   /* Seja encontrado — verde */
  --cor-encontrado-2: #B2EEDC;
  --cor-encontrado-3: #5ADEB7;
  --cor-encontrado-4: #4FCBA6;
  --cor-escolhido-1: #FCF5D2;    /* Seja escolhido — amarelo */
  --cor-escolhido-2: #F9EBA6;
  --cor-escolhido-3: #FFDC73;
  --cor-escolhido-4: #DFC331;
  --cor-capture-1: #D9D6FB;      /* Capture oportunidades — lilás */
  --cor-capture-2: #B5C4F5;
  --cor-capture-3: #98A5EF;
  --cor-capture-4: #485FDE;
  --cor-acompanhe-1: #FFD7D6;    /* Acompanhe — coral */
  --cor-acompanhe-2: #F2A9A9;
  --cor-acompanhe-3: #E69393;
  --cor-acompanhe-4: #D15C5C;

  /* Tipografia */
  --fonte-titulo: "Literata", Georgia, serif;
  --fonte-texto: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo-peso: 300;
  --titulo-opsz: "opsz" 40;      /* trava o contraste da serifa em qualquer tamanho */
  --peso-texto: 400;
  --peso-medio: 500;
  --peso-forte: 600;

  /* Escala: tamanho / entrelinha / tracking. Títulos encolhem no celular. */
  --texto-gigante: clamp(72px, 9vw, 144px);   --texto-gigante-lh: 1;    --texto-gigante-ls: -0.03em;
  --texto-display: clamp(40px, 4vw + 8px, 64px); --texto-display-lh: 1.1; --texto-display-ls: -0.03em;
  --texto-titulo: clamp(32px, 3vw + 8px, 48px);  --texto-titulo-lh: 1.1;  --texto-titulo-ls: -0.03em;
  --texto-subtitulo: clamp(28px, 2vw + 12px, 40px); --texto-subtitulo-lh: 1.1; --texto-subtitulo-ls: -0.025em;
  --texto-grande: 18px;   --texto-grande-lh: 1.45;  --texto-grande-ls: -0.015em;
  --texto-base: 16px;     --texto-base-lh: 1.5;     --texto-base-ls: -0.01em;
  --texto-pequeno: 14px;  --texto-pequeno-lh: 1.4;  --texto-pequeno-ls: -0.01em;
  --texto-legenda: 12px;  --texto-legenda-lh: 1.4;  --texto-legenda-ls: 0;

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

  /* Forma */
  --raio-botao: 0;           /* botão é retângulo reto: assinatura da marca */
  --raio-pequeno: 10px;
  --raio-medio: 14px;
  --raio-palco: 24px;        /* painel de demonstração / ilustração */
  --raio-pill: 999px;
  --linha: 1px solid var(--cor-linha);
  --botao-altura: 52px;
  --alvo-toque: 44px;

  /* Grade */
  --grade-colunas: 16;       /* 8 abaixo de 940px */
  --largura-max: 1440px;
  --margem-pagina: clamp(16px, 3.3vw, 48px);

  /* Movimento: uma curva, quatro durações */
  --curva: cubic-bezier(.2, .8, .2, 1);
  --dur-micro: 150ms;        /* hover, foco, press */
  --dur-curta: 250ms;
  --dur-estado: 400ms;       /* troca de estado: o padrão */
  --dur-revelar: 800ms;      /* entrada de bloco */
}

@media (max-width: 939px) {
  :root { --grade-colunas: 8; }
}