/* =========================================================================
   tokens.css — Clínica Serena (site-modelo)
   Contraste medido em 24/09/2026 (WCAG 2.x):
   fg/bg 14.9 · fg-muted/bg 5.6 · fg-muted/surface-1 5.0 · fg-muted/card 5.9
   primary-fg/primary 12.2 · accent/primary 7.1
   ========================================================================= */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallbacks com métricas aproximadas, para reduzir o salto na troca de fonte */
@font-face {
  font-family: "Serif Fallback";
  src: local("Georgia");
  size-adjust: 88%;
  ascent-override: 100%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Sans Fallback";
  src: local("Arial");
  size-adjust: 103%;
  ascent-override: 104%;
  descent-override: 29%;
  line-gap-override: 0%;
}

:root {
  /* ---------- Cor ---------- */
  --bg: #F5F2ED;
  --surface-1: #ECE6DE;
  --surface-2: #E2DAD0;          /* só fundo, sem texto (4.5:1 não garantido) */
  --card: #FBF9F6;
  --fg: #221D1A;
  --fg-muted: #6A5F57;
  --border: rgba(34, 29, 26, 0.12);

  --primary: #3B2A24;            /* exclusiva da ação primária e da seção "Agende" */
  --primary-fg: #F5F2ED;
  --primary-hover: #2A1D18;

  --accent: #C9B8A3;             /* areia: detalhes sobre o espresso */
  --on-image: #F5F2ED;
  --focus: #3B2A24;

  /* ---------- Tipografia ---------- */
  --font-display: "Instrument Serif", "Serif Fallback", Georgia, serif;
  --font: "Manrope", "Sans Fallback", system-ui, sans-serif;

  --fs-display: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  --fs-h2: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  --fs-h3: clamp(1.45rem, 1.25rem + 0.8vw, 1.8rem);
  --fs-lead: clamp(1.02rem, 0.96rem + 0.3vw, 1.15rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-tight: 1.02;
  --lh-body: 1.65;
  --tracking-caps: 0.14em;

  /* ---------- Layout ---------- */
  --container: 1240px;
  --gutter: clamp(16px, 5vw, 48px);
  --section-y: clamp(72px, 10vw, 136px);

  /* ---------- Forma ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --shadow-float: 0 10px 30px rgba(34, 29, 26, 0.25);

  /* ---------- Movimento ---------- */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Camadas ---------- */
  --z-header: 90;
  --z-float: 100;
}

/* ---------- Base mínima ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}