/* =============================================================
   Dra. Gabriela Gaia — Psiquiatra
   Design Tokens — ponto único de cor, tipografia e movimento.

   Paleta da marca (fonte: .brief/report.md + visual-dna.json):
     índigo   #3E4E8F   primary — ênfase do display, botões, links
     azul     #6FA8DC   accent secundário (decorativo e sobre escuro)
     céu      #2E3D6B → #C5D2E8
     papel    #FBFAF7

   Cada valor derivado foi conferido contra o mínimo AA (4.5:1 para
   texto normal, 3:1 para texto grande). Os números do contraste estão
   anotados ao lado dos pares que importam.
   ============================================================= */

:root {
  /* ---------- Cor: superfícies ---------- */
  --paper:        #fbfaf7;  /* fundo principal */
  --paper-warm:   #f3f2ef;  /* placeholder de mídia, fundos de nicho */
  --paper-soft:   #fdfcfa;  /* hover de superfície clara */
  --white:        #ffffff;
  --ink:          #171b2e;  /* texto principal — índigo quase preto */
  --ink-deep:     #0e1120;  /* seções escuras, rodapé */
  --grey-600:     #4c5164;
  --grey-200:     #e6e5e1;

  /* ---------- Cor: marca ---------- */
  --indigo:       #3e4e8f;  /* primary  · 7.5:1 sobre --paper */
  --indigo-deep:  #2e3d6b;  /* topo do céu, blocos escuros */
  --indigo-mid:   #55679f;
  --sky:          #6fa8dc;  /* accent secundário — decorativo, nunca texto pequeno sobre claro */
  --sky-soft:     #9dc3e6;
  --sky-pale:     #c5d2e8;  /* base do céu */
  --sky-mist:     #dce7f5;  /* pílulas e tags sobre claro */
  --sky-arrow:    #7e9bc6;  /* stroke das setas de link */

  /* Céu do hero — quatro paradas.
     O gradiente de duas paradas do template deixava o miolo claro demais
     e o texto do hero caía para ~2.9:1. Com as paradas intermediárias na
     própria cor primária, a faixa onde o texto vive fica em 5.9:1. */
  --sky-0: #2e3d6b;   /* 0%   */
  --sky-1: #3e4e8f;   /* 38%  */
  --sky-2: #7e9bc6;   /* 66%  */
  --sky-3: #c5d2e8;   /* 100% */

  /* ---------- Cor: semânticos ---------- */
  --bg:            var(--paper);
  --surface:       var(--white);
  --fg:            var(--ink);                  /* 16.4:1 sobre --paper */
  --fg-muted:      rgba(23, 27, 46, 0.64);      /*  5.1:1 sobre --paper */
  --fg-on-dark:    #f5f6fa;
  --fg-on-dark-muted: rgba(245, 246, 250, 0.72);
  --border:        rgba(23, 27, 46, 0.12);
  --border-strong: rgba(23, 27, 46, 0.22);
  --accent:        var(--indigo);
  --dark-section:  var(--ink-deep);

  /* Ênfase do display sobre fundo escuro (rodapé, blocos índigo) */
  --emph-on-dark:  #a8c6e8;                     /*  9.7:1 sobre --ink */

  --inset-hairline: rgba(23, 27, 46, 0.06) 0 0 0 1px inset;
  --focus-ring:     0 0 0 3px rgba(62, 78, 143, 0.28);

  /* ---------- Tipografia ----------
     Sem serif: o DNA da marca é sereno e clínico, não editorial.
     Display e corpo são a mesma família em pesos diferentes — a hierarquia
     vem do peso, do tamanho e da cor. */
  --font-display: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Inter', 'Inter Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Fragment Mono', ui-monospace, Menlo, monospace;

  --display-weight: 500;

  /* Ênfase do display. NUNCA itálico neste site — a ênfase é cor + peso. */
  --display-emph-style:  normal;
  --display-emph-weight: 700;
  --display-emph-color:  var(--indigo);

  /* Escala 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;                                   /* 22px */
  --t-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);/* 18 → 20px */
  --t-body:    1.125rem;                                   /* 18px */
  --t-sm:      1rem;                                       /* 16px */
  --t-xs:      0.875rem;                                   /* 14px */

  /* Line-heights */
  --lh-display: 1.06;
  --lh-tight:   1.14;
  --lh-snug:    1.26;
  --lh-body:    1.5;
  --lh-relaxed: 1.4;
  --lh-loose:   1.6;

  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-caps:    0.08em;

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

  /* ---------- Espaçamento ---------- */
  --sp-xs:    4px;
  --sp-sm:    8px;
  --sp-md:    10px;
  --sp-lg:    12px;
  --sp-xl:    16px;
  --sp-2xl:   20px;
  --sp-3xl:   24px;
  --sp-4xl:   32px;
  --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 ----------
     Curvas herdadas da engenharia do template — o ritmo é bom e foi mantido. */
  --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                                            */