/* Clínica Living — Design Tokens
   Fundação do site one page institucional (Dr. Alexandre Trindade)
   Fontes (decisão final): Hedvig Letters Serif — só na H1/hero
                            Archivo — todo o resto (corpo, menu, botões, títulos de seção) */

@font-face {
  font-family: "Hedvig Letters Serif";
  src: url("../FONTES/HEDVIG LETTERS SERIF/HedvigLettersSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../FONTES/ARCHIVO/Archivo-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../FONTES/ARCHIVO/Archivo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../FONTES/ARCHIVO/Archivo-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../FONTES/ARCHIVO/Archivo-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../FONTES/ARCHIVO/Archivo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cores base — sem marrom. Dourado calibrado na logo oficial + greige das referências do Dr. Alexandre */
  --ivory: #F7F2E9;
  --cream: #F2EBDA;
  --sand: #EAE0CF;
  --taupe: #B4A183;
  --taupe-line: #DCD0AE;
  --gold: #C4A375;          /* dourado calibrado por amostragem da logo oficial */
  --gold-light: #E8D2A8;    /* realce claro — topo do gradiente metálico */
  --gold-deep: #8F6F3A;     /* sombra do gradiente metálico, texto de destaque */
  --gold-strong: #A9812E;   /* acentos pontuais fortes — footer, selos */
  --gold-bright: #D9B876;
  --greige: #9C9680;        /* greige claro — cards, blocos suaves (ref. do Dr. Alexandre) */
  --greige-deep: #423D2C;   /* greige/oliva escuro — blocos pontuais no lugar do verde-pedra */
  --ink: #26261F;           /* cinza-chumbo quente, não marrom */
  --warm-grey: #65624F;
  --white: #FFFFFF;

  /* Papéis semânticos (site é claro, sem seção escura de base) */
  --bg: var(--cream);
  --bg-alt: var(--sand);
  --bg-anchor: var(--greige-deep);   /* só blocos pontuais: rodapé, selo, Clube da Beleza */
  --ink-main: var(--ink);
  --ink-soft: var(--warm-grey);
  --ink-on-anchor: var(--ivory);
  --ink-on-anchor-soft: #C9BBA4;
  --line: var(--taupe-line);
  --accent: var(--gold);
  --accent-deep: var(--gold-deep);
  --accent-strong: var(--gold-strong);
  --accent-bright: var(--gold-light);
  --card-bg: var(--white);

  /* Tipografia */
  --serif: "Hedvig Letters Serif", "Times New Roman", serif;  /* uso exclusivo: H1 do hero */
  --sans: "Archivo", -apple-system, "Segoe UI", sans-serif;   /* tudo mais: menu, corpo, botões, H2/H3 de seção */

  --text-display: clamp(2.8rem, 2rem + 3.2vw, 4rem);   /* H1 hero, serif */
  --text-h1: clamp(2.1rem, 1.7rem + 1.8vw, 3.25rem);
  --text-h2: clamp(1.6rem, 1.4rem + 0.9vw, 2.05rem);
  --text-h3: clamp(1.1rem, 1rem + 0.3vw, 1.2rem);
  --text-body-lg: 1.02rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-eyebrow: 0.7rem;

  /* Espaçamento */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout - grid baseado em canvas 1920 (16:9), margens de 390 nas laterais */
  --content-width: 1216px;   /* área útil do grid - laterais mostram --bg */

  /* Movimento */
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);

  /* Cantos — leve arredondamento em tudo (botões, cards, SAC). Nunca pílula, nunca reto. */
  --radius-card: 10px;
  --radius-btn: 8px;
}

/* Regras de ouro:
   1. Serif (Hedvig Letters Serif) só na H1 do hero. Todo o resto do site é Archivo.
   2. Dourado nunca como texto pequeno sobre marfim/creme — só em títulos grandes,
      botões, ícones, linhas/dividers e sobre --bg-anchor. Preferir gradiente
      (--gold-light → --gold-deep) a preenchimento chapado na logo/detalhes 3D.
   3. --bg-anchor (greige-deep) é só para blocos pontuais (rodapé, selo, Clube da
      Beleza) — nunca a base do site, que é sempre claro.
   4. Sem marrom em lugar nenhum da paleta.
   5. Botões, cards e blocos do SAC: cantos levemente arredondados (--radius-btn /
      --radius-card), nunca pílula (border-radius:999px) e nunca reto (0px). */