/* =============================================================
   Dr. Paulo Henrique de Almeida Soares · Médico Cardiologista
   Design tokens. Ponto único de cor e de tipografia do site.

   Paleta da marca (definida no brief, não inventada). O vocabulário
   é semântico, nunca rampa numérica: cada nome diz o que a cor é
   dentro deste site, e não a que altura de escala ela está.

     --bruma      #F5F7FA   fundo principal
     --maresia    #D8E3ED   superfície de apoio
     --azul-mar   #1F6FB2   primária: display, botões, links
     --abissal    #12324A   seções escuras, footer
     --carmim     #C0342B   acento único, o batimento, com parcimônia
     --grafite    #172029   texto principal

   Os derivados abaixo saíram desses seis por ajuste de luminância,
   não por invenção. O contraste de cada par texto/fundo em uso está
   anotado ao lado, medido pela fórmula WCAG. Mínimo AA (4.5:1) para
   texto de corpo, e a régua vale para todo par do corpo do site.

   Regra dura de cor deste projeto: não existe navy, preto, cinza
   chumbo, marrom nem escuro profundo fora da paleta. O tom mais
   escuro é o --abissal, e o --grafite só aparece em texto e detalhe.
   Hover nunca escurece para fora da paleta: ele anda dentro dela.
   ============================================================= */

:root {
  /* ---------- Cor: superfícies ---------- */
  --bruma:        #f5f7fa;  /* fundo principal, do brief */
  --maresia:      #d8e3ed;  /* superfície de apoio, do brief */
  --branco:       #ffffff;  /* cards */
  --espuma:       #eaf1f7;  /* lavado entre bruma e maresia: faixas, avisos */

  /* ---------- Cor: marca ---------- */
  --azul-mar:     #1f6fb2;  /* primária: 4.9:1 sobre --bruma, 5.3:1 sobre --branco */
  --mar-fundo:    #1a5e97;  /* a mesma primária rebaixada: 6.3:1 sobre --bruma.
                               É ESTE tom que vira rótulo pequeno, ícone e hover
                               de botão: escurece dentro da paleta, sem puxar preto */
  --mar-raso:     #8fc2e6;  /* a primária clareada: 7.0:1 sobre --abissal.
                               É o azul que pode virar texto nas seções escuras */
  --abissal:      #12324a;  /* seções escuras, footer, do brief */
  --abissal-alto: #0e2839;  /* o abissal um passo abaixo: hover no escuro */
  --carmim:       #c0342b;  /* acento único: 5.2:1 sobre --bruma, 5.6:1 sobre --branco */

  /* ---------- Cor: texto ---------- */
  --grafite:      #172029;  /* texto principal: 15.3:1 sobre --bruma */
  --grafite-suave:#5b6d7a;  /* texto secundário: 5.0:1 sobre --bruma (AA) */
  --grafite-fundo:#51626e;  /* o secundário um passo abaixo, para as seções que
                               pousam sobre --maresia. O --grafite-suave rende
                               4.1:1 ali, abaixo do AA; este rende 4.9:1 */

  /* ---------- Céu do hero (gradiente literal do brief) ---------- */
  --ceu-topo:     #12324a;
  --ceu-base:     #d8e3ed;
  --ceu-parada:   84%;

  /* Véu de leitura. O piso do hero, medido e não estimado: o pior fundo não é o
     topo escuro do degradê, é o pé dele (#d8e3ed) com uma nuvem clara por cima.
     Nesse ponto, 0.55 rende 4.19:1 e reprova; 0.60 rende 4.83:1 e passa. Como o
     bloco de texto é centralizado e a sua altura varia com a largura da tela,
     o véu segura 0.60 até 74% e só então solta, para o mar aparecer embaixo.
     Este é o número que sustenta o AA do hero. */
  --ceu-veu:      rgba(23, 32, 41, 0.60);

  /* ---------- Cor: semânticos ---------- */
  --bg:            var(--bruma);
  --surface:       var(--branco);
  --fg:            var(--grafite);
  --fg-muted:      var(--grafite-suave);
  --fg-on-dark:    #f5f7fa;                      /* 12.4:1 sobre --abissal */
  --fg-on-dark-mu: rgba(245, 247, 250, 0.80);    /*  8.2:1 sobre --abissal */
  --border:        rgba(23, 32, 41, 0.12);
  --border-strong: rgba(23, 32, 41, 0.22);
  --accent:        var(--azul-mar);
  --dark-section:  var(--abissal);

  --inset-hairline: rgba(23, 32, 41, 0.06) 0 0 0 1px inset;

  /* ---------- Tipografia ----------
     Display Archivo, corpo IBM Plex Sans, mono IBM Plex Mono. Todas sem
     serifa. A ênfase do display se faz por COR e PESO, nunca por
     inclinação: itálico é proibido no site inteiro. */
  --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --display-weight:      500;
  --display-emph-style:  normal;      /* regra dura: nenhum itálico no site */
  --display-emph-color:  var(--azul-mar);
  --display-emph-weight: 700;

  /* Escala fluida entre mobile e desktop */
  --t-display: clamp(2.125rem, 1.2rem + 3.9vw, 3.75rem);     /* hero  34 → 60px */
  --t-h1:      clamp(2rem, 1.4rem + 2.6vw, 3.25rem);         /* 32 → 52px */
  --t-h2:      clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);     /* 28 → 42px */
  --t-h3:      clamp(1.5rem, 1.28rem + 0.95vw, 2rem);        /* 24 → 32px */
  --t-h4:      clamp(1.3125rem, 1.18rem + 0.55vw, 1.625rem); /* 21 → 26px */
  --t-h5:      1.375rem;                                     /* 22px */
  --t-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);    /* 17 → 19px */
  --t-body:    1.0625rem;                                    /* 17px */
  --t-sm:      1rem;                                         /* 16px */
  --t-xs:      0.875rem;                                     /* 14px */
  --t-stat:    clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem);

  --lh-display: 1.06;
  --lh-tight:   1.14;
  --lh-snug:    1.28;
  --lh-body:    1.4;
  --lh-relaxed: 1.45;
  --lh-loose:   1.6;
  --lh-prose:   1.68;   /* corpo longo: a página respira, como a consulta */

  --ls-display: -0.022em;
  --ls-tight:   -0.008em;
  --ls-caps:    0.09em;

  /* ---------- Espaçamento (escala 8) ---------- */
  --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 ----------
     Eases e durações do sistema. Não renomear: js/main.js depende
     deles para o reveal em spring e para o parallax. */
  --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 do sistema (preservados do exemplar):
   mobile  ≤ 699.98px
   tablet    700px a 1199.98px
   desktop ≥ 1200px                                            */