/* ==========================================================================
   VARIÁVEIS GLOBAIS (DESIGN TOKENS)
   --------------------------------------------------------------------------
   Esta é a base de todo o sistema visual do site. Qualquer cor, tamanho de
   tipografia ou espaçamento deve vir DAQUI — nunca escrever valores soltos
   (ex: "#1a63af" ou "23px") diretamente noutros ficheiros CSS.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     COR
     Paleta baseada no logótipo (maçã dourada + fundo azul-marinho) e na
     sinalética azul da clínica.
     NOTA IMPORTANTE: estes valores hexadecimais foram estimados visualmente
     a partir das fotografias fornecidas. Antes de colocar o site em
     produção, confirma os tons exatos com um seletor de cor (color picker)
     sobre os ficheiros originais "logo-entrada.webp" e "favicon.jpg", e
     ajusta aqui se necessário.
     -------------------------------------------------------------------- */
  --color-navy-deep: #123674;      /* fundo do logótipo / secções escuras / rodapé */
  --color-blue-primary: #1b5fa8;   /* azul da sinalética — cor de marca principal */
  --color-blue-light: #3d7ec2;     /* tint claro do azul primário — título Hero (~3.96:1 sobre --color-cream, cumpre AA para texto grande) */
  --color-blue-dark: #123f70;      /* variante escura do azul primário */
  --color-gold: #c9a24e;           /* dourado da maçã e do texto do logótipo */
  --color-gold-light: #e3c77e;     /* tint do dourado — realces e fundos subtis */
  --color-gold-dark: #C8A258;      /* shade do dourado — estados de hover */
  --color-cream: #faf7f1;          /* fundo alternativo, quente e suave */
  --color-white: #f8f8f8;
  --color-ink: #1b222c;            /* texto principal */
  --color-grey: #667085;           /* texto secundário */
  --color-grey-light: #e4e7ec;     /* divisórias e bordas subtis (hairlines) */

  /* --------------------------------------------------------------------
     TIPOGRAFIA
     Garamond para títulos (carregado via Google Fonts no index.html:
     "EB Garamond") + fonte sans-serif premium para o corpo de texto
     ("Manrope" — geométrica, limpa, contraste elegante com a serifada).
     Se preferires outra fonte de texto corrido (ex: "General Sans" ou
     "Satoshi" via Fontshare), basta substituir aqui e no <link> do HTML.
     -------------------------------------------------------------------- */
  --font-display: 'EB Garamond', 'Garamond', 'Times New Roman', serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;

  /* Escala tipográfica fluida (clamp): cresce suavemente entre mobile e
     desktop, sem "saltos" bruscos em breakpoints fixos. */
  --fs-h1: clamp(2.75rem, 2rem + 3vw, 4.75rem);
  --fs-h2: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --fs-small: 0.875rem;

  /* --------------------------------------------------------------------
     ESPAÇAMENTO
     Escala consistente em múltiplos de 4px — nunca usar valores
     arbitrários como "17px" ou "23px" fora desta escala.
     -------------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 1rem;      /* 16px */
  --space-4: 1.5rem;    /* 24px */
  --space-5: 2rem;      /* 32px */
  --space-6: 3rem;      /* 48px */
  --space-7: 4rem;      /* 64px */
  --space-8: 6rem;      /* 96px */
  --space-9: 8rem;      /* 128px */

  /* --------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------- */
  --container-max: 1120px;                        /* largura máxima pedida */
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);

  /* Ritmo vertical entre secções: fonte única de verdade para o
     "padding-block-start/end" que quase todas as secções usam. Antes
     cada ficheiro repetia "var(--space-6)"/"var(--space-8)" à mão —
     o Processo tinha ficado dessincronizado (space-8 dos dois lados,
     em vez do padrão space-6/space-8) e nenhuma secção reduzia este
     respiro em mobile, onde 48–96px pesa muito mais num ecrã com
     bem menos altura útil (auditoria 02/09). Redefinido só em mobile
     abaixo — todas as secções que leem estes tokens ajustam-se
     automaticamente. */
  --section-pad-block-start: var(--space-6);
  --section-pad-block-end: var(--space-8);

  /* --------------------------------------------------------------------
     CANTOS
     -------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* --------------------------------------------------------------------
     MOVIMENTO
     Valores partilhados por toda a aplicação, para garantir um
     vocabulário de animação coerente (mesmo easing/duração em todo o
     site, conforme diretriz de coerência de movimento).
     -------------------------------------------------------------------- */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 350ms;
  --duration-slow: 600ms;
}

/* Mobile (<768px): ritmo vertical entre secções reduzido — o mesmo
   respiro de desktop (48–96px) deixava muito espaço "morto" repetido
   a cada transição de secção num ecrã bem mais baixo (auditoria
   02/09). Continua assimétrico (início < fim), só a escala desce. */
@media (max-width: 767px) {
  :root {
    --section-pad-block-start: var(--space-5); /* 32px, era 48px */
    --section-pad-block-end: var(--space-6);    /* 48px, era 96px */
  }
}