/* Tokens extraídos do Figma.
   Cores: variáveis do arquivo (referencia/figma-dados/variaveis.md).
   Tipografia e medidas: get_design_context de cada seção (referencia/figma-dados/). */

:root {
  /* Cores */
  --navy-kalina: #1b2340;
  --dourado-kalina: #e8a93a;
  --texto-claro: #4f5469;
  --fundo-cinza: #cacaca;
  --creme-kalina: #faf8f2;
  --logo-claro: #a3a3a3;
  --fundo-claro: #f4f2ec;
  --grey-dark: #282828;
  --branco: #fff; /* só na palavra "próprio" do hero */
  --cinza-texto: #6e6e6e; /* logo-claro escurecido para texto pequeno e ícones (contraste 4.8:1; aprovado pelo Julio) */

  /* Famílias */
  --fonte-display: "Fraunces", Georgia, "Times New Roman", serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fonte-logo: "Space Grotesk", var(--fonte-texto);

  /* Tamanhos (valor do Figma a 1440px como máximo) */
  --fs-display-xl: clamp(2.5rem, 1.6rem + 2.6vw, 3.5rem);    /* 56px — título do hero (64 no Figma; reduzido a pedido do Julio) */
  --fs-lead: 1.125rem;                                       /* 18px — subtítulo do hero e das seções (iguais) */
  --fs-corpo: 1rem;                                          /* 16px — menu, barra */
  --fs-card-titulo: 1rem;                                    /* 16px — Fraunces nos cards */
  --fs-etiqueta-g: 0.9375rem;                                /* 15px — mono light do header */
  --fs-botao: 0.8125rem;                                     /* 13px — mono dos botões */
  --fs-etiqueta: 0.75rem;                                    /* 12px — mono das etiquetas */
  --fs-card-texto: 0.75rem;                                  /* 12px — texto dos cards */

  /* Entrelinhas */
  --lh-32: 2rem;
  --lh-lead: 1.75rem;   /* 28, dos subtítulos */
  --lh-15: 0.9375rem;

  /* Grade: linha vertical à esquerda e recuo do conteúdo (96px e 48px a 1440) */
  --trilho-x: clamp(12px, 6.667vw, 96px);
  --recuo: clamp(16px, 3.333vw, 48px);
  --conteudo-x: calc(var(--trilho-x) + var(--recuo));
  --margem-dir: clamp(20px, 4.1vw, 59px);

  /* Losango gigante do fundo (soluções → contato → rodapé): borda esquerda do retângulo.
     347px a 1440 (Figma); abaixo disso anda para a esquerda, para o "V" do rodapé não sair da tela */
  --losango-x: min(346.97px, 100% - 1093px);

  /* Linhas */
  --linha-grade: 3px;    /* linhas cinza da grade */
  --linha-fina: 1px;

  /* Seção 1 */
  --header-altura: 88px;
}