/* ==========================================================================
   Ariana Bisetto Beauty Clinic — tokens de design (etapa de layout, PRÉVIA)
   Fontes (Google Fonts):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
   ========================================================================== */
:root {
  /* --- Cores da cliente --- */
  --c-bg-base: #fafaf8;      /* fundo principal, header */
  --c-bg-warm: #fff6e5;      /* fundo quente: hero (topo), depoimentos, CTA final, destaque do card Ultrafocus */
  --c-bg-blush: #fff7ff;     /* fundo dos cards (tratamentos, depoimentos) */
  --c-gold-500: #b88b4d;     /* dourado forte: botão primário, estrelas, ícone flutuante, selo */
  --c-gold-400: #af9061;     /* dourado médio: bordas, detalhes e texto dourado sobre fundo ESCURO */
  --c-gold-300: #a48d74;     /* bege escuro: ícones de linha, bordas de card */
  --c-gold-200: #a9977c;     /* bege claro: divisórias, placeholders, texto de apoio sobre escuro */
  --c-ink: #231c18;          /* texto principal, fundos escuros (Método, rodapé) */

  /* --- Derivadas (NÃO são da cliente; só para legibilidade) --- */
  --c-ink-soft: #5a4a3a;     /* texto secundário em claro (contraste 7,9:1 sobre #fff6e5) */
  --c-gold-ink: #7a5a2c;     /* texto dourado PEQUENO em fundo claro (6,0:1 sobre #fafaf8) */
  --c-line: rgba(164, 141, 116, .35);   /* bordas finas em fundo claro */
  --c-line-dark: rgba(175, 144, 97, .35); /* bordas finas em fundo escuro */
  --c-overlay: rgba(35, 28, 24, .55);

  /* --- Tipografia --- */
  --f-display: "Cormorant Garamond", "Times New Roman", serif;
  --f-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-eyebrow: .75rem;                              /* 12px, caixa alta, tracking .18em */
  --fs-small: .875rem;                               /* 14px */
  --fs-body: 1rem;                                   /* 16px mobile */
  --fs-lead: clamp(1.0625rem, .98rem + .35vw, 1.25rem);  /* 17 a 20px */
  --fs-h3: clamp(1.5rem, 1.3rem + .8vw, 2rem);       /* 24 a 32px */
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);     /* 32 a 52px */
  --fs-h1: clamp(2.5rem, 1.7rem + 3.8vw, 4.75rem);   /* 40 a 76px */
  --lh-tight: 1.05;
  --lh-heading: 1.12;
  --lh-body: 1.7;
  --tracking-eyebrow: .18em;
  --tracking-btn: .02em;

  /* --- Espaçamentos (base 4px) --- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 7.5rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 7.5rem);  /* padding vertical das seções: 72 a 120px */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2rem);             /* 20 a 32px nas laterais */
  --grid-gap: clamp(1rem, 2vw, 1.5rem);
  --header-h: 64px;                                 /* 76px a partir de 1024px (ver media abaixo) */

  /* --- Raios --- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --r-arch: 999px 999px var(--r-lg) var(--r-lg);   /* foto em arco (hero, especialistas) */

  /* --- Sombras (quentes, suaves) --- */
  --sh-sm: 0 1px 2px rgba(35, 28, 24, .06), 0 2px 8px rgba(35, 28, 24, .05);
  --sh-md: 0 8px 24px rgba(35, 28, 24, .08);
  --sh-lg: 0 20px 48px rgba(35, 28, 24, .12);
  --sh-gold: 0 10px 28px rgba(184, 139, 77, .35);   /* botão primário e flutuante */

  /* --- Movimento --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-reveal: 650ms;

  /* --- Camadas --- */
  --z-header: 50;
  --z-float: 60;
  --z-menu: 70;
}

@media (min-width: 1024px) {
  :root { --header-h: 76px; --fs-body: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-reveal: 0ms; }
}