/* ==========================================================================
   TOKENS — Perocco Bio
   Fonte: PRD_Perocco_Bio.md v0.2 + Perocco_Identidade_Visual.md
   Não alterar valores sem checar o PRD.
   ========================================================================== */

:root {
  /* Paleta Perocco */
  --cor-fundo: #1A110D;        /* café morno: fundo da página */
  --cor-superficie: #241812;   /* cards: um passo acima do fundo */
  --cor-superficie-2: #2A1D17; /* thumbs e círculos de ícone */
  --cor-texto: rgba(240, 232, 221, 0.9);  /* linho ~90%: texto corrido */
  --cor-texto-rebaixado: rgba(240, 232, 221, 0.6); /* linho ~60%: labels */
  --cor-titulo: #F0E8DD;       /* linho pleno: títulos e wordmark */
  --cor-acento: #7E2438;       /* vinho: botão CTA, contorno da foto */
  --cor-acento-fraca: rgba(126, 36, 56, 0.4); /* vinho ~40%: borda do CTA */
  --cor-realce: #C84A5E;       /* carmim: reservado a thumbnail pelo guia; uso nos realces da bio e desvio consciente aprovado na rodada 2 */
  --cor-borda: rgba(240, 232, 221, 0.12); /* linhas divisórias e bordas de card */
  --cor-borda-forte: rgba(240, 232, 221, 0.15);

  /* Tipografia — Perfect Fourth (1.333), base 16px, fluida 360->1280 */
  --fs-h1: clamp(3.375rem, 2.495rem + 3.91vw, 5.625rem);  /* 54 -> 90, reserva */
  --fs-h2: clamp(2.625rem, 1.989rem + 2.83vw, 4.250rem);  /* 42 -> 68, reserva */
  --fs-h3: clamp(2.125rem, 1.734rem + 1.74vw, 3.125rem);  /* 34 -> 50, nome */
  --fs-h4: clamp(1.750rem, 1.505rem + 1.09vw, 2.375rem);  /* 28 -> 38, reserva */
  --fs-h5: clamp(1.375rem, 1.228rem + 0.65vw, 1.750rem);  /* 22 -> 28, título CTA */
  --fs-h6: 1.375rem;      /* 22: título de card */
  --fs-body: 1rem;        /* 16: bio, texto CTA */
  --fs-small: 0.75rem;    /* 12: descrição de card */
  --fs-caption: 0.625rem; /* 10: labels de seção, footer */

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.5;

  /* Spacing */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12: gap entre linhas do card */
  --space-4: 1rem;     /* 16: padding dos cards */
  --space-5: 1.5rem;   /* 24: gap entre cards */
  --space-6: 2rem;     /* 32: margem entre seções */
  --space-7: 3rem;     /* 48: respiro header/CTA */
  --space-8: 4rem;     /* 64: topo da página / footer */

  /* FONTE PROVISÓRIA (P2): Bricolage Grotesque até decisão final da identidade */
  --font-titulo: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-corpo: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

h1 { font-size: var(--fs-h1); line-height: 1.05; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-heading); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-snug); }
body { font-size: var(--fs-body); line-height: var(--lh-body); }
.text-small { font-size: var(--fs-small); line-height: var(--lh-body); }
.text-caption { font-size: var(--fs-caption); line-height: 1.4; }