/* =============================================================
   Dr. Paulo André Pereira — Design Tokens
   Ponto único de cor, tipografia, espaço e movimento do site.

   A paleta sai do DNA visual da marca (.brief/visual-dna.json):
   azul sereno, verde-água, branco-luz, azul-grafite. Consultório
   luminoso, luz natural, madeira clara. Nada de creme, blush ou clay.

   Contraste: todo par texto/fundo abaixo foi conferido contra o
   mínimo AA (4.5:1 para texto corrido, 3:1 para texto grande).
   ============================================================= */

:root {
  /* ---------- Cor: superfícies ---------- */
  --surface:      #f4f6f7;  /* branco-luz — fundo da página */
  --surface-soft: #fbfcfc;  /* hover de superfícies claras */
  --surface-warm: #e5ebee;  /* placeholder de mídia, fundo de ilustração */
  --white:        #ffffff;  /* cards */

  /* ---------- Cor: tinta ---------- */
  --ink:       #22303a;  /* azul-grafite — texto principal e seções escuras */
  --ink-deep:  #17222a;  /* rodapé */
  --on-dark:   #f4f6f7;  /* texto sobre o escuro e sobre o céu */

  /* ---------- Cor: marca ---------- */
  --brand:       #3e6e8e;  /* azul sereno — ênfase do display, links, botões */
  --brand-deep:  #2e5570;  /* estados, topo do céu */
  --brand-soft:  #dbe6ec;  /* fundo de etiqueta */
  --sage:        #7fb59a;  /* verde-água — acento da medicina integrativa */
  --sage-deep:   #3d6b58;  /* mesmo acento quando precisa carregar texto */

  /* Céu do hero: do azul-grafite ao verde-água pálido */
  --sky-top:    #2e5570;
  --sky-bottom: #cbdcd8;
  --sky-stop:   84.31%;

  /* ---------- Cor: semânticos ---------- */
  --bg:            var(--surface);
  --fg:            var(--ink);          /* 13.0:1 sobre --surface */
  --fg-muted:      #4e5c66;             /*  6.4:1 sobre --surface */
  --fg-on-dark:    var(--on-dark);      /* 12.5:1 sobre --ink */
  --fg-on-dark-mu: rgba(244, 246, 247, 0.72);
  --border:        rgba(34, 48, 58, 0.12);
  --border-strong: rgba(34, 48, 58, 0.22);
  --accent:        var(--brand);        /*  5.0:1 sobre --surface */
  --dark-section:  var(--ink);

  --inset-hairline: rgba(34, 48, 58, 0.06) 0 0 0 1px inset;
  --focus-ring:     rgba(62, 110, 142, 0.22);

  /* ---------- Tipografia ----------
     Sem serif e sem itálico em lugar nenhum: a ênfase do display se
     faz por cor e peso. Duas famílias reais, servidas do disco. */
  --font-display: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Fragment Mono', ui-monospace, Menlo, monospace;

  --display-weight:      500;
  --display-emph-style:  normal;   /* nunca italic */
  --display-emph-weight: 700;
  --display-emph-color:  var(--brand);

  /* Escala fluida entre mobile e desktop */
  --t-display: clamp(2.75rem, 1.6rem + 4.6vw, 5rem);
  --t-h1:      clamp(2.25rem, 1.5rem + 3.1vw, 3.5rem);
  --t-h2:      clamp(2rem,   1.45rem + 2.3vw, 2.8125rem);
  --t-h3:      clamp(1.5rem, 1.25rem + 1.1vw, 2.1875rem);
  --t-h4:      clamp(1.375rem, 1.2rem + 0.6vw, 1.8125rem);
  --t-h5:      1.375rem;
  --t-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --t-body:    1.125rem;
  --t-sm:      1rem;
  --t-xs:      0.875rem;
  --t-stat:    clamp(2rem, 1.4rem + 2.2vw, 3rem);

  /* Line-heights */
  --lh-display: 1.06;
  --lh-tight:   1.12;
  --lh-snug:    1.26;
  --lh-body:    1.32;
  --lh-relaxed: 1.4;
  --lh-loose:   1.55;

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

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

  /* ---------- Espaçamento (escala 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 ---------- */
  --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                                            */