/* =============================================================
   Isabelly Gomes Gallardo — Psicóloga e Psicanalista
   Design Tokens — ponto único de cor do site.

   Paleta da marca (extraída do material real da profissional:
   verde-floresta + botânico + off-white, ver .brief/visual-dna.json).
   Contraste verificado contra WCAG AA (texto ≥ 4.5:1, display ≥ 3:1).
   ============================================================= */

:root {
  /* ---------- Cor: marca ---------- */
  --forest:      #1f5c2e;  /* primário — ênfase do display, botões, links   (7.8:1 sobre --paper) */
  --forest-deep: #143d1f;  /* estados pressionados e superfícies profundas   */
  --forest-mid:  #3e7a4e;  /* metadados e numerais sobre claro               (5.0:1 sobre --paper) */
  --sage:        #8fa88c;  /* acento secundário — decorativo e texto sobre escuro */
  --sage-pale:   #dde7da;  /* base do céu, fundos suaves                      */
  --sage-mist:   #edf2ea;  /* superfície alternativa                          */

  /* ---------- Cor: superfícies ---------- */
  --paper:      #fafbf8;  /* fundo principal */
  --paper-warm: #f2f5ef;
  --paper-soft: #fdfefc;
  --white:      #ffffff;
  --ink:        #16211a;  /* texto principal — verde quase preto, nunca preto puro */
  --ink-deep:   #0b120d;  /* o mais escuro da escala — sombras e véus */
  --grey-600:   #4a544c;

  /* Superfícies escuras (bloco de compromissos, rodapé). Verde-noite, não preto:
     preto puro apagaria a marca justamente onde ela ocupa a tela inteira.
     Creme sobre ele: 14.8:1 — e o creme a 72% ainda dá 8.3:1. */
  --forest-night: #0f2a19;

  /* Céu do hero.
     Os stops mantêm o miolo escuro o bastante para o texto creme passar em AA:
     sob a área do título a cor efetiva é ~#33693F (6.3:1 contra o creme). */
  --sky-top:    #1b4726;
  --sky-mid:    #33693f;
  --sky-fade:   #6e8f74;
  --sky-bottom: #dde7da;

  /* ---------- Cor: semânticos ---------- */
  --bg:            var(--paper);
  --surface:       var(--white);
  --fg:            var(--ink);
  --fg-muted:      rgba(22, 33, 26, 0.68);   /* 5.7:1 sobre --paper */
  --fg-on-dark:    var(--paper);
  --fg-on-dark-muted: rgba(250, 251, 248, 0.72);  /* 8.3:1 sobre --dark-section */
  --border:        rgba(22, 33, 26, 0.12);
  --border-strong: rgba(22, 33, 26, 0.2);
  --accent:        var(--forest);
  --dark-section:  var(--forest-night);

  --inset-hairline: rgba(22, 33, 26, 0.06) 0 0 0 1px inset;
  --focus-ring:     0 0 0 3px rgba(31, 92, 46, 0.28);

  /* ---------- Tipografia ----------
     A serif do display é pedida pelo DNA da marca (report.md: "tipografia
     serifada verde"). É a única serif do site. */
  --font-display: 'FAIRE Octave Trial Variable', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', 'Inter Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Fragment Mono', ui-monospace, Menlo, monospace;

  /* Ênfase do display. NUNCA itálico — a marca não se inclina.
     O arquivo da display não traz eixo de peso (não é variável de fato),
     então pedir bold produziria negrito sintético. A ênfase é por COR.
     Sobre o céu escuro do hero, a cor não distingue: lá a ênfase vira um
     sublinhado em sage, definido em .hero__title em (styles.css). */
  --display-emph-style: normal;
  --display-emph-color: var(--forest);

  /* Escala tipográfica fluida (mobile → desktop) */
  --t-display: clamp(2.75rem, 1.6rem + 4.6vw, 5rem);
  --t-h1:      clamp(2.25rem, 1.5rem + 3.1vw, 3.5rem);     /* 36 → 56px */
  --t-h2:      clamp(2rem,   1.45rem + 2.3vw, 2.8125rem);  /* 32 → 45px */
  --t-h3:      clamp(1.5rem, 1.25rem + 1.1vw, 2.1875rem);  /* 24 → 35px */
  --t-h4:      clamp(1.375rem, 1.2rem + 0.6vw, 1.8125rem); /* 22 → 29px */
  --t-h5:      1.375rem;
  --t-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* 18 → 20px */
  --t-body:    1.125rem;
  --t-sm:      1rem;
  --t-xs:      0.875rem;
  --t-stat:    clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

  /* Line-heights */
  --lh-display: 1.04;
  --lh-tight:   1.1;
  --lh-snug:    1.24;
  --lh-body:    1.28;
  --lh-relaxed: 1.4;
  --lh-loose:   1.5;

  /* Letter-spacing */
  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-caps:    0.08em;

  --otf: 'blwf' on, 'cv03' on, 'cv04' on, 'cv09' on, 'cv11' on;

  /* ---------- Espaçamento (escala de 8px) ---------- */
  --sp-xs:    4px;
  --sp-sm:    8px;
  --sp-md:    10px;
  --sp-lg:    12px;
  --sp-xl:    16px;
  --sp-2xl:   20px;
  --sp-3xl:   24px;
  --sp-4xl:   31px;
  --sp-5xl:   48px;
  --sp-6xl:   64px;
  --sp-7xl:   96px;

  --section-y: clamp(72px, 8vw, 140px);
  --gutter:    clamp(20px, 4vw, 64px);
  --maxw:      1280px;
  --maxw-text: 62ch;

  /* ---------- Raios ---------- */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 24px;
  --r-card: 24px;
  --r-pill: 999px;

  /* ---------- Movimento ----------
     Eases herdados da engenharia do template. Não mexer sem medir. */
  --ease-brand:  cubic-bezier(0.44, 0, 0.56, 1);
  --ease-drift:  cubic-bezier(0.34, 0.64, 0.34, 1);
  --ease-snap:   cubic-bezier(0.27, 0, 0.51, 1);
  --dur-fast:    0.2s;
  --dur-base:    0.4s;
  --dur-slow:    1s;
  --dur-cinema:  2s;
}

/* Breakpoints:
   mobile  ≤ 699.98px
   tablet    700px – 1199.98px
   desktop ≥ 1200px                                            */