/* =============================================================
   MEDIMAGEN · Clínica Radiológica e Ultrassonográfica de Mauá
   Design tokens. Ponto único de cor e de tipografia do site.

   Paleta da marca (definida no brief, não inventada, vocabulário
   semântico próprio, nunca rampa numérica):
     gelo-clinico       #E8EEF1  fundo principal
     vidro              #C4D7DE  superfície de apoio
     azul-prisma        #1B6F8C  primária: display, botões, links
     noite-clinica      #0F2A34  seções escuras, footer
     ouro-velho         #C6A15B  acento, rótulos, bloco de prioridade
     tinta-radiologia   #131B1F  texto principal

   Todos os tokens dependentes abaixo foram recalculados a partir
   desses seis valores. O contraste de cada par texto/fundo em uso
   está anotado ao lado (WCAG 2.1, fórmula de luminância relativa),
   mínimo AA (4.5:1) para texto de corpo.
   ============================================================= */

:root {
  /* ---------- Cor: superfícies ---------- */
  --gelo-clinico:  #e8eef1;  /* fundo principal (brief) */
  --paper-soft:    #f2f5f6;  /* placeholder de mídia, faixas discretas */
  --white:         #ffffff;  /* cards */
  --vidro:         #c4d7de;  /* superfície de apoio (brief) */

  /* ---------- Cor: marca ---------- */
  --azul-prisma:      #1b6f8c;  /* primária (brief) */
  --azul-prisma-800:  #155a72;  /* hover do botão, 7.67:1 com texto branco */
  --azul-prisma-900:  #123544;  /* recuo profundo, uso pontual */
  --noite-clinica:    #0f2a34;  /* seções escuras (brief) */
  --ouro-velho:       #c6a15b;  /* acento (brief). NUNCA como texto sobre claro (2.07:1, reprova) */
  --ouro-velho-deep:  #7f602f;  /* o mesmo acento, rebaixado até 4.96:1 sobre --gelo-clinico:
                                    é ESTE que pode virar texto, rótulo ou ícone no claro */
  --ouro-velho-pale:  #e4c888;  /* acento legível sobre escuro (9.22:1 sobre --noite-clinica) */
  --ouro-velho-wash:  #f6efe0;  /* lavado, bloco de prioridade, faixas de apoio */

  /* ---------- Cor: texto ---------- */
  --tinta:       #131b1f;  /* texto principal, 14.89:1 sobre --gelo-clinico */
  --tinta-soft:  #456070;  /* texto secundário, 5.67:1 sobre --gelo-clinico (AA) */

  /* ---------- Céu do hero (gradiente literal do brief) ---------- */
  --sky-top:     #0f2a34;
  --sky-bottom:  #c4d7de;
  --sky-stop:    84%;

  /* Véu do hero: rgba escurecido do tom de tinta, opacidade mínima 0.55
     (brief). Medido atrás do título e da microcopy nos três breakpoints,
     ver nota de composição em styles.css, seção 6. */
  --sky-veil: rgba(19, 27, 31, 0.58);

  /* ---------- Cor: semânticos ---------- */
  --bg:            var(--gelo-clinico);
  --surface:       var(--white);
  --fg:            var(--tinta);
  --fg-muted:      var(--tinta-soft);
  --fg-on-dark:    #eef4f6;                        /* 14.4:1 sobre --noite-clinica */
  --fg-on-dark-mu: rgba(238, 244, 246, 0.78);       /*  9.6:1 sobre --noite-clinica */
  --border:        rgba(19, 27, 31, 0.12);
  --border-strong: rgba(19, 27, 31, 0.22);
  --accent:        var(--azul-prisma);
  --dark-section:  var(--noite-clinica);

  --inset-hairline: rgba(19, 27, 31, 0.06) 0 0 0 1px inset;

  /* ---------- Tipografia ----------
     Sem serif e sem itálico neste site. O display é Lexend (legibilidade
     estudada, reduz esforço de leitura, importa muito para explicar
     preparo de exame a público idoso e ansioso), o corpo é Mulish, e o
     mono (Geist Mono) marca kickers, números de registro e rótulos.
     A ênfase do display se faz por COR e PESO, nunca por inclinação. */
  --font-display: 'Lexend', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Mulish', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, Menlo, monospace;

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

  /* 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 explicação de um exame */

  --ls-display: -0.015em;
  --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 springs da engenharia do template. 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 template (preservados):
   mobile  ≤ 699.98px
   tablet    700px-1199.98px
   desktop ≥ 1200px                                            */