/* ------------------------------------------------------------------
   CLÍNICA PAZ · design tokens
   Conceito "nem mais, nem menos": a medida certa e o equilíbrio (a paz
   do nome). Base fria de névoa, sálvia para ritmo, verde-petróleo como
   acento e no CTA, grafite só no rodapé. Uma família só, sem serifa:
   Bricolage Grotesque, com eixos de tamanho óptico e largura.
   Imagens de banco em duotone petróleo; fotos reais sem tratamento.
   ------------------------------------------------------------------ */
:root {
  /* — cor — */
  --nevoa: #ECEEE9;
  --nevoa-2: #E1E5DF;
  --salvia: #C8D2C7;
  --grafite: #131819;
  --grafite-2: #1C2324;
  --grafite-soft: #39403F;
  --cinza: #5F6866;
  --cinza-2: #9AA3A0;
  --petroleo: #0D5257;
  --petroleo-2: #0A3F43;
  --menta: #9ED0C6;

  --bg: var(--nevoa);
  --fg: var(--grafite);
  --fg-soft: var(--grafite-soft);
  --muted: var(--cinza);
  --hair: rgba(19, 24, 25, .14);
  --accent: var(--petroleo);

  /* — tipografia — */
  --font: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(3rem, 7.6vw, 9rem);
  --fs-display-xl: clamp(3rem, 8.8vw, 10.5rem);
  --fs-display-l: clamp(2.3rem, 5.2vw, 6rem);
  --fs-display-m: clamp(1.75rem, 3.2vw, 3.5rem);
  --fs-display-s: clamp(1.3rem, 1.9vw, 1.95rem);
  --fs-lede: clamp(1.08rem, 1.32vw, 1.3rem);
  --fs-body: clamp(1rem, 1.04vw, 1.06rem);
  --fs-small: .875rem;
  --fs-label: .72rem;

  --lh-display: .92;
  --lh-body: 1.58;
  --tracking-label: .14em;

  /* — grid — */
  --gutter: clamp(1rem, 2.2vw, 2.25rem);
  --margin: clamp(1.25rem, 5vw, 6rem);
  --section-gap: clamp(6rem, 12vw, 12rem);

  /* — motion system — */
  --m-fast: .45s;
  --m-med: .9s;
  --m-slow: 1.6s;
  --ease-standard: cubic-bezier(.22, 1, .36, 1);
  --ease-editorial: cubic-bezier(.77, 0, .18, 1);
  --ease-reveal: cubic-bezier(.16, 1, .3, 1);

  --z-nav: 50;
  --z-grain: 60;
}

[data-theme="light"] { --bg: var(--nevoa); }
[data-theme="stone"] { --bg: var(--nevoa-2); }
/* na sálvia o cinza escurece para manter 4.5:1 */
[data-theme="sage"] { --bg: var(--salvia); --muted: #4A5351; --hair: rgba(19, 24, 25, .18); }
[data-theme="accent"] {
  --bg: var(--petroleo);
  --fg: var(--nevoa);
  --fg-soft: #D6E4E1;
  --muted: var(--menta);
  --hair: rgba(236, 238, 233, .24);
  --accent: var(--menta);
}
[data-theme="dark"] {
  --bg: var(--grafite);
  --fg: var(--nevoa);
  --fg-soft: #CDD3D0;
  --muted: var(--cinza-2);
  --hair: rgba(236, 238, 233, .14);
  --accent: var(--menta);
}