/* ==========================================================================
   Design tokens — extraídos dos Color styles e Text styles do Figma
   Arquivo: Paula Vilhena (S2gbHgs31WhTQsxAsJ6Gjm), frame "Desktop - 1" 16:3
   ========================================================================== */

:root {
  /* --- Cores (Color styles) ------------------------------------------- */
  --c-ink:        #0f0d0b;              /* 0F0D0B — texto principal sobre claro */
  --c-bg:         #faf7f2;              /* [BG] FAF7F2 / Off White */
  --c-sand:       #d9d2c4;              /* D9D2C4 — fundo "Como funciona" */
  --c-stone:      #6e665c;              /* 6E665C — eyebrow / texto de apoio */
  --c-gold:       #c8a451;              /* Color – Ascent */
  --c-gold-deep:  #a8843c;              /* A8843C — botão do hero, numerais */
  --c-dark:       #1e1e1e;              /* #1E1E1E — superfícies escuras */
  --c-black:      #000000;              /* rodapé e CTA */
  --c-white:      #ffffff;

  /* Derivadas do design (fills com opacidade) */
  --c-overlay:    rgba(0, 0, 0, .2);    /* Overlays/Default sobre a foto do hero */
  --c-pill:       rgba(217, 210, 196, .39);  /* fundo das pílulas "Você pode estar vivendo isso se:" */
  --c-hairline:   rgba(0, 0, 0, .3);         /* borda dos cards do FAQ */
  --c-rule:       rgba(168, 132, 60, .5);    /* linha tracejada do Dossiê */
  --c-gold-soft:  rgba(200, 164, 81, .35);
  --c-gold-glow:  rgba(200, 164, 81, .12);

  /* --- Tipografia (Text styles) ---------------------------------------- */
  --f-head: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-ui:   'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-num:  'Aboreto', 'Times New Roman', Georgia, serif;

  /* Archivo é variável (wght 100–900, wdth 62–125). O eixo de largura foi
     calibrado em 78% medindo as linhas do Figma: a linha "mas realizá-lo virou
     um obstáculo?" ocupa 675px a 64px, contra 674px no "Heading Pro Trial". */
  --head-width: 78%;

  /* Escalas fluidas: mínimo mobile → valor exato do Figma no desktop */
  --fs-h1:      clamp(2.25rem, 1.20rem + 3.40vw, 4rem);      /* 36 → 64 */
  --fs-h2:      clamp(1.75rem, 1.05rem + 2.10vw, 3rem);      /* 28 → 48 */
  --fs-h3:      clamp(1.375rem, 1.05rem + 0.95vw, 2rem);     /* 22 → 32 */
  --fs-sub:     clamp(1rem, 0.93rem + 0.22vw, 1.25rem);      /* 16 → 20 */
  --fs-num:     clamp(2.5rem, 1.60rem + 2.80vw, 4rem);       /* 40 → 64 */
  --fs-eyebrow: 0.75rem;                                     /* 12 */
  --fs-btn:     1rem;                                        /* 16 */

  /* letterSpacing do Figma vem em %, convertido para em */
  --ls-h1:      -0.05em;   /* -5%  */
  --ls-h2:      -0.03em;   /* -3%  */
  --ls-h3:       0.03em;   /*  3%  */
  --ls-sub:      0.03em;   /*  3%  */
  --ls-eyebrow:  0.25em;   /* 25%  */

  --lh-tight: 1;
  --lh-sub:   1.25;
  --lh-prose: 1.5;

  /* --- Espaçamento ------------------------------------------------------ */
  --sp-1: 0.5rem;    /* 8  */
  --sp-2: 0.75rem;   /* 12 */
  --sp-3: 1rem;      /* 16 */
  --sp-4: 1.5rem;    /* 24 */
  --sp-5: 2rem;      /* 32 */
  --sp-6: 2.5rem;    /* 40 */
  --sp-7: 4rem;      /* 64 */
  --sp-section: clamp(3.5rem, 2rem + 4vw, 5rem);   /* py-80 no Figma */

  /* --- Layout ----------------------------------------------------------- */
  --container: 1426px;               /* 1920 − 247×2 */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --col-gap: clamp(2rem, 4.7vw, 90px);

  /* --- Raios ------------------------------------------------------------ */
  --r-btn:    8px;
  --r-pill:   12px;
  --r-card:   24px;
  --r-media:  40px;
  --r-avatar: 64px;

  /* --- Movimento -------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .5s;
  --dur-fast: .25s;

  /* --- Altura do header fixo -------------------------------------------- */
  --header-h: 72px;
}