/* Pautamos — tokens da marca. Importe uma vez no frontend (ex.: src/styles/tokens.css). */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap;
  src: url("./fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap;
  src: url("./fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap;
  src: url("./fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap;
  src: url("./fonts/figtree-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Cores */
  --pt-coral: #E0553D;          /* marca, ícone, áreas grandes; texto branco só >= 24px (3,8:1) */
  --pt-coral-profundo: #B83C28; /* botões e links; texto branco 5,6:1 */
  --pt-tinta: #1F2A44;          /* texto principal; 13,4:1 sobre papel */
  --pt-ardosia: #4A5470;        /* texto secundário; 7,0:1 sobre papel */
  --pt-papel: #FBF7F1;          /* fundo */
  --pt-areia: #F2EADF;          /* superfícies, cartões */
  --pt-borda: #E6DCCD;          /* bordas */
  --pt-folha: #1E7A55;          /* "dobrar", sucesso; 5,0:1 */
  --pt-mostarda: #E8B04B;       /* "testar", atenção; usar com texto tinta (7,3:1) */
  --pt-branco: #FFFFFF;

  /* Semântica da revisão semanal */
  --pt-dobrar: var(--pt-folha);
  --pt-manter: var(--pt-ardosia);
  --pt-parar: var(--pt-coral-profundo);
  --pt-testar: var(--pt-mostarda);

  /* Tipografia */
  --pt-fonte-titulo: "Bricolage Grotesque", Georgia, serif;
  --pt-fonte-texto: "Figtree", system-ui, sans-serif;
  --pt-display: 800 60px/1.02 var(--pt-fonte-titulo);
  --pt-titulo: 800 40px/1.05 var(--pt-fonte-titulo);
  --pt-subtitulo: 600 28px/1.15 var(--pt-fonte-titulo);
  --pt-corpo: 400 17px/1.55 var(--pt-fonte-texto);
  --pt-legenda: 400 14px/1.4 var(--pt-fonte-texto);
  --pt-titulo-tracking: -0.02em;

  /* Forma */
  --pt-raio-sm: 12px;
  --pt-raio-md: 18px;
  --pt-raio-lg: 30px;
  --pt-alvo-toque: 48px;
}