/* ==========================================================================
   Mater · Clínica Perinatal
   tokens.css · sistema de design compartilhado
   Cores extraídas da logo. Não edite valores aqui sem conferir contraste.
   ========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --rose:        #B97263;  /* wordmark "Mater", cor primária e de marca      */
  --rose-deep:   #A9584A;  /* botões e texto sobre creme · 5.02:1 no branco  */
  --rose-tint:   #EAD6CE;  /* fundos suaves                                  */

  --sage:        #8F9C7C;  /* verde-sálvia, trilha do pós-parto              */
  --sage-deep:   #566149;  /* seções de contraste, rodapé · 5.99:1 no creme  */
  --sage-tint:   #E4E8DC;

  --gold:        #C7A263;  /* dourado, trilha da gestação                    */
  --gold-deep:   #A2803F;
  --gold-tint:   #EFE4CC;

  /* --- Neutros ---------------------------------------------------------- */
  --cream:       #F9F6F0;  /* fundo principal                                */
  --cream-2:     #FFFDF8;  /* cards                                          */
  --ink:         #3F332C;  /* texto principal, marrom quente                 */
  --muted:       #7E7163;  /* texto secundário (só em corpo grande, 4.4:1)   */
  --line:        #E6DCCB;  /* divisórias                                     */

  /* Derivados para acessibilidade AA. O --muted da marca fica em 4.4:1 no
     creme, abaixo do mínimo de 4.5:1 para texto pequeno. Use --muted-strong
     em qualquer texto secundário com menos de 24px.                         */
  --muted-strong: #6B5F52; /* 5.66:1 no creme                                */
  --gold-text:    #7E6029; /* dourado legível em texto pequeno · 5.35:1      */

  /* --- Pele por fase (sobrescrita em [data-fase]) ------------------------ */
  --accent:      var(--gold);
  --accent-deep: var(--gold-deep);
  --accent-tint: var(--gold-tint);
  --accent-text: var(--gold-text);

  /* --- Tipografia ------------------------------------------------------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-label:   "Jost", "Inter", -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida, mobile-first */
  --fs-eyebrow: 0.75rem;
  --fs-small:   0.875rem;
  --fs-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --fs-h3:      clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --fs-h2:      clamp(1.625rem, 1.35rem + 1.35vw, 2.375rem);
  --fs-h1:      clamp(2rem, 1.5rem + 2.4vw, 3.25rem);

  --lh-tight:   1.15;
  --lh-heading: 1.2;
  --lh-body:    1.65;

  /* --- Espaçamento ------------------------------------------------------ */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  5.5rem;

  --section-y: clamp(3rem, 2rem + 5vw, 5.5rem);
  --wrap:      68rem;
  --wrap-text: 42rem;

  /* --- Forma e profundidade --------------------------------------------- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(63, 51, 44, 0.05);
  --shadow:    0 2px 12px rgba(63, 51, 44, 0.06);
  --shadow-lg: 0 8px 32px rgba(63, 51, 44, 0.09);

  --ring: 3px;
}

/* --- Trilha da gestação: dourado ---------------------------------------- */
[data-fase="gestacao"] {
  --accent:      var(--gold);
  --accent-deep: var(--gold-deep);
  --accent-tint: var(--gold-tint);
  --accent-text: var(--gold-text);
}

/* --- Trilha do pós-parto: verde-sálvia ---------------------------------- */
[data-fase="pos-parto"] {
  --accent:      var(--sage);
  --accent-deep: var(--sage-deep);
  --accent-tint: var(--sage-tint);
  --accent-text: var(--sage-deep); /* 5.99:1 no creme, seguro em texto pequeno */
}

/* A marca tem duas trilhas de cor, dourado e verde-sálvia. Os clusters novos
   reaproveitam essas trilhas para não estourar a paleta. O valor de data-fase
   segue distinto (ex.: "fertilidade") para o tracking do Google Ads ficar certo. */

/* Fertilidade / tentantes: trilha dourada (começo da jornada) */
[data-fase="fertilidade"] {
  --accent:      var(--gold);
  --accent-deep: var(--gold-deep);
  --accent-tint: var(--gold-tint);
  --accent-text: var(--gold-text);
}

/* Fase de criação (filhos maiores): trilha verde-sálvia */
[data-fase="criacao"] {
  --accent:      var(--sage);
  --accent-deep: var(--sage-deep);
  --accent-tint: var(--sage-tint);
  --accent-text: var(--sage-deep);
}

/* Parto: trilha verde-sálvia (transição para o pós-parto) */
[data-fase="parto"] {
  --accent:      var(--sage);
  --accent-deep: var(--sage-deep);
  --accent-tint: var(--sage-tint);
  --accent-text: var(--sage-deep);
}

/* Luto perinatal: trilha verde-sálvia, o tom mais sóbrio e sereno */
[data-fase="luto"] {
  --accent:      var(--sage);
  --accent-deep: var(--sage-deep);
  --accent-tint: var(--sage-tint);
  --accent-text: var(--sage-deep);
}

/* Rede, casal e família: trilha dourada */
[data-fase="rede"] {
  --accent:      var(--gold);
  --accent-deep: var(--gold-deep);
  --accent-tint: var(--gold-tint);
  --accent-text: var(--gold-text);
}