/* =========================================================
   Tokens — identidade visual "Grafite e sol" v1.0 (09/11/2026)
   Fonte da verdade: docs/identidade-visual.md
   Use sempre estas variáveis. Não escreva cores, fontes,
   raios ou espaçamentos soltos no CSS das páginas.
   ========================================================= */

/* Fontes hospedadas no próprio site (licença OFL em /fonts) */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/sora/sora-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk/hanken-grotesk-latin-wght-italic.woff2") format("woff2");
}

:root {
  /* ---------- Cores: base ---------- */
  --ts-grafite: #24282C;        /* texto, botão principal, blocos escuros */
  --ts-grafite-2: #3A3F45;      /* hover de botão grafite, bordas no escuro */
  --ts-sol: #F2B84B;            /* destaque: marca-texto, botão de destaque, monograma */
  --ts-sol-2: #E5A93A;          /* hover do botão sol */
  --ts-sol-claro: #FCEBC6;      /* seleção de texto, hover suave */
  --ts-sol-escuro: #9A6A00;     /* sol como TEXTO sobre branco (4,73:1) */
  --ts-branco: #FFFFFF;
  --ts-nevoa: #F3F3F1;          /* superfície de cartões e chips */
  --ts-nevoa-2: #ECECE8;        /* fundo de seção alternada */

  /* ---------- Cores: papéis ---------- */
  --ts-fundo: var(--ts-branco);
  --ts-superficie: var(--ts-nevoa);
  --ts-texto: var(--ts-grafite);          /* 14,84:1 no branco */
  --ts-texto-2: #5B6066;                  /* texto secundário: 6,34:1 no branco, 5,71:1 na névoa */
  --ts-texto-inverso: var(--ts-branco);
  --ts-texto-inverso-2: #D2D4D6;          /* secundário sobre grafite: 9,99:1 */
  --ts-borda: #DDDDD7;                    /* divisórias decorativas */
  --ts-borda-campo: #7A7F85;              /* borda de campo: 4,04:1 no branco */
  --ts-erro: #B3261E;
  --ts-erro-fundo: #FCEDEB;
  --ts-sucesso: #1F6B45;
  --ts-sucesso-fundo: #E8F3EC;
  --ts-foco: var(--ts-grafite);           /* anel de foco sobre fundo claro */
  --ts-foco-inverso: var(--ts-sol);       /* anel de foco sobre grafite */

  /* ---------- Tipografia ---------- */
  --ts-fonte-display: "Sora", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ts-fonte-texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ts-texto-h1: clamp(2.25rem, 1.35rem + 3.6vw, 3.625rem);      /* 36 → 58 px */
  --ts-texto-h2: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);        /* 28 → 40 px */
  --ts-texto-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);         /* 20 → 24 px */
  --ts-texto-numero: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);        /* 32 → 40 px */
  --ts-texto-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);    /* 17 → 19 px */
  --ts-texto-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);      /* 16 → 17 px */
  --ts-texto-pequeno: 0.9375rem;                                  /* 15 px */
  --ts-texto-legenda: 0.8125rem;                                  /* 13 px */

  --ts-peso-texto: 400;
  --ts-peso-medio: 500;
  --ts-peso-semi: 600;
  --ts-peso-negrito: 700;
  --ts-peso-titulo: 800;

  --ts-altura-titulo: 1.05;
  --ts-altura-subtitulo: 1.15;
  --ts-altura-texto: 1.6;

  --ts-espaco-letra-h1: -0.03em;
  --ts-espaco-letra-h2: -0.02em;
  --ts-espaco-letra-rotulo: 0.14em;

  --ts-medida: 65ch;            /* largura máxima de parágrafo */

  /* ---------- Espaçamento (base 4/8) ---------- */
  --ts-esp-1: 0.25rem;   /*  4 */
  --ts-esp-2: 0.5rem;    /*  8 */
  --ts-esp-3: 0.75rem;   /* 12 */
  --ts-esp-4: 1rem;      /* 16 */
  --ts-esp-5: 1.5rem;    /* 24 */
  --ts-esp-6: 2rem;      /* 32 */
  --ts-esp-7: 2.5rem;    /* 40 */
  --ts-esp-8: 3rem;      /* 48 */
  --ts-esp-9: 4rem;      /* 64 */
  --ts-esp-10: 5rem;     /* 80 */
  --ts-esp-secao: clamp(3.5rem, 2.4rem + 4.5vw, 7rem);   /* 56 → 112 px entre seções */
  --ts-margem-lateral: clamp(1rem, 0.4rem + 2.6vw, 2.5rem); /* 16 → 40 px */
  --ts-largura-max: 80rem;      /* 1280 px */
  --ts-vao-bento: clamp(0.75rem, 0.5rem + 0.8vw, 1rem);   /* 12 → 16 px */

  /* ---------- Forma ---------- */
  --ts-raio-p: 0.625rem;   /* 10 px: marca-texto, selos */
  --ts-raio-campo: 0.75rem;/* 12 px: campos de formulário */
  --ts-raio-m: 0.875rem;   /* 14 px: botões */
  --ts-raio-g: 1.125rem;   /* 18 px: cartões pequenos, passos */
  --ts-raio-xg: 1.5rem;    /* 24 px: cartões grandes, fotos */
  --ts-raio-total: 999px;  /* chips e monograma */

  --ts-sombra-1: 0 1px 2px rgba(36, 40, 44, 0.06), 0 4px 12px rgba(36, 40, 44, 0.06);
  --ts-sombra-2: 0 18px 50px rgba(36, 40, 44, 0.12);

  /* ---------- Componentes ---------- */
  --ts-altura-botao: 3.5rem;          /* 56 px */
  --ts-altura-botao-compacto: 2.875rem; /* 46 px */
  --ts-alvo-minimo: 2.75rem;          /* 44 px de área de toque */
  --ts-cabecalho-altura: 4.75rem;     /* 76 px */
  --ts-monograma: 2.625rem;           /* 42 px */

  /* ---------- Movimento ---------- */
  --ts-duracao-rapida: 160ms;
  --ts-duracao-media: 280ms;
  --ts-curva: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Breakpoints (só referência; CSS não lê variável em @media):
     até 599 px celular · 600–959 tablet · 960–1079 notebook pequeno · 1080+ desktop */
}

@media (max-width: 599px) {
  :root {
    --ts-cabecalho-altura: 4rem;      /* 64 px */
    --ts-monograma: 2.25rem;          /* 36 px */
    --ts-altura-botao: 3.25rem;       /* 52 px */
  }
}