/* ============================================================
   PERSON HÉLICES — TOKENS
   Identidade oficial (brandbook + vetores da marca):
   navy #003057 · dourado #BC995D · cream #F6F2EC.
   A página é uma descida: cream (superfície) → navy profundo.
   Dourado é acento, nunca área.
   ============================================================ */

:root {
  /* --- Cor (paleta oficial do brandbook, Pantone calibrado) ---
     Proporção: navy 60% · creme 20% · gelo 15% · dourado máx. 5%.
     Combinações corretas: creme/dourado sobre navy; navy sobre creme/gelo.
     Nunca: dourado sobre claro, dourado como base. */
  --navy-brand:   #003057;  /* Pantone 540 C — cor dominante */
  --navy-deep:    #003057;  /* fundos escuros */
  --navy-abyss:   #00223E;  /* o ponto mais fundo — fundição, CTA final */
  --navy-surface: #0E3E6A;  /* cards e superfícies elevadas sobre navy */
  --cream:        #FAEDBC;  /* Pantone 7499 U — o respiro: texto sobre navy, toques */
  --gray-bg:      #F7F8F9;  /* fundo claro do site — cinza quase branco */
  --gray-card:    #FFFFFF;  /* cards sobre o cinza claro (alias: --paper-warm) */
  /* (token --cream-card removido — substituído por --gray-card) */
  --gelo:         #D7E3E8;  /* Pantone 657 UP — o horizonte, apoio frio */
  --gold:         #BC995D;  /* Pantone 7556 U — o bronze, só sobre navy */
  --gold-light:   #D2B37C;  /* hover sobre navy */
  --steel:        #5C6E80;  /* legendas sobre claro */

  /* Aliases usados pelos componentes */
  --abyss: var(--navy-abyss);
  --navy: var(--navy-deep);
  --paper: var(--gray-bg);
  --paper-warm: var(--gray-card);
  --bronze: var(--gold);
  --bronze-light: var(--gold-light);

  /* Semânticos */
  --bg: var(--gray-bg);
  --ink: #16324F;                 /* texto sobre claro — navy escurecido */
  --ink-strong: var(--navy-brand);
  --ink-soft: #44576B;            /* secundário sobre claro */
  --ink-inverse: #FAEDBC;         /* creme sobre navy (combinação oficial) */
  --ink-inverse-soft: #C4D3DE;    /* secundário sobre navy */
  --line: rgba(0, 48, 87, 0.16);
  --line-inverse: rgba(250, 237, 188, 0.22);
  --focus: var(--navy-brand);

  /* --- Tipografia (Typekit: Sweet Gothic + Montserrat, apenas) --- */
  --font-display: "sweet-gothic", "Cinzel", "Trajan Pro", serif;
  --font-body: "montserrat", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "montserrat", -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida — display em caixa alta pede corpo menor */
  --text-display: clamp(2rem, 1.3rem + 2.8vw, 3.625rem);      /* H1 */
  --text-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-mono: 0.8125rem;
  --text-numeral: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);

  --leading-body: 1.7;
  --leading-tight: 1.18;
  --tracking-display: 0.07em;     /* Sweet Gothic: sempre alta, .06–.08em */
  --tracking-mono: 0.16em;        /* eyebrows e rótulos Montserrat caps */
  --measure: 68ch;

  /* --- Espaço (base 8) --- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 7.5rem;
  --s-9: 12.5rem;
  --section-gap: clamp(4.5rem, 3rem + 7vw, 11rem);

  /* --- Layout --- */
  --max-w: 1360px;
  --gutter: 24px;
  --radius: 4px;

  /* --- Movimento --- */
  --t-micro: 160ms ease-out;
  --t-reveal: 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}