/* ============================================================
   Dra. Daiane Carvalho — Design tokens (F0)
   Fonte da verdade: PROJETO-DRA-DAIANE.md, seção 9.
   Cor: teal + mauve. Tipografia: Mulish (400/600/800).
   ============================================================ */

:root {
  /* ---- Primitives: teal (primária) ---- */
  --teal-50:  #EAF4F3;
  --teal-100: #C7E4E1;
  --teal-200: #8FC4C0;
  --teal-400: #5C9695;
  --teal-600: #476D6E;
  --teal-800: #345152;
  --teal-900: #233738;

  /* ---- Primitives: mauve (acento) ---- */
  --mauve-50:  #F0EAEF;
  --mauve-100: #D9C9D6;
  --mauve-200: #B199AC;
  --mauve-400: #876A82;
  --mauve-600: #67465D;
  --mauve-800: #4E3446;
  --mauve-900: #33222E;

  /* ---- Primitives: neutral ---- */
  --white:       #FFFFFF;
  --bg:          #F6FAF9;
  --mint:        #BEE8E1;
  --text-soft:   #5F5E5A;
  --text-strong: #383838;

  /* ---- Primitives: green (WhatsApp) ---- */
  --wa:      #25D366;
  --wa-dark: #128C7E;
  --wa-text: #0A3D20;

  /* ---- Tokens semânticos: superfície ---- */
  --superficie-pagina:  var(--bg);
  --superficie-card:    var(--white);
  --superficie-respiro: var(--mint);

  /* ---- Tokens semânticos: marca ---- */
  --marca-primaria:        var(--teal-600);
  --marca-primaria-escura: var(--teal-800);
  --marca-acento:          var(--mauve-600);

  /* ---- Tokens semânticos: ação (WhatsApp) ---- */
  --acao-whatsapp:       var(--wa);
  --acao-whatsapp-hover: var(--wa-dark);
  --acao-whatsapp-texto: var(--wa-text);
  --acao-whatsapp-icone: var(--white);

  /* ---- Tokens semânticos: texto ---- */
  --texto-forte:          var(--text-strong);
  --texto-suave:          var(--text-soft);
  --texto-titulo:         var(--teal-800);
  --texto-sobre-primaria: var(--white);

  /* ---- Tokens semânticos: borda ---- */
  --borda-sutil: var(--teal-100);

  /* ---- Spacing (do Figma) ---- */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  12px;
  --spacing-lg:  16px;
  --spacing-xl:  24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;

  /* ---- Radius (do Figma) ---- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 999px;
}

/* ============================================================
   Reset enxuto + base tipográfica (Mulish)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Mulish', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--texto-forte);
  background: var(--superficie-pagina);
  -webkit-font-smoothing: antialiased;
}

/* ---- Escala tipográfica (F0, seção 9.5) ---- */
.tipo-display   { font-size: 48px; font-weight: 800; line-height: 1.1;  letter-spacing: -0.02em; }
.tipo-titulo    { font-size: 32px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.tipo-subtitulo { font-size: 22px; font-weight: 600; line-height: 1.25; }
.tipo-corpo-forte { font-size: 16px; font-weight: 600; line-height: 1.5; }
.tipo-corpo     { font-size: 16px; font-weight: 400; line-height: 1.6; }
.tipo-label     { font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; text-transform: uppercase; }
.tipo-legenda   { font-size: 13px; font-weight: 400; line-height: 1.4; }

/* ---- Botão de WhatsApp (tratamento do Figma) ---- */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  background: var(--acao-whatsapp);
  color: var(--acao-whatsapp-icone);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background 0.18s ease;
}
.btn-whatsapp:hover,
.btn-whatsapp:active { background: var(--acao-whatsapp-hover); }
.btn-whatsapp:focus-visible {
  outline: 3px solid var(--marca-primaria-escura);
  outline-offset: 2px;
}
.btn-whatsapp svg { fill: var(--acao-whatsapp-icone); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}