/* =============================================================
   GRAZI PIVETTA — DESIGN SYSTEM (tokens)
   Tipografia: Cabin (títulos) + DM Sans (texto)
   Fonte única de verdade para cor, tipografia, espaçamento,
   raios, sombras e transições. Não escreva valores "mágicos"
   nos componentes — use sempre as variáveis abaixo.
   ============================================================= */

:root {
  /* ---------- CORES — MARCA ---------- */
  --color-espresso: #2A1A18;   /* fundo escuro principal  */
  --color-espresso-deep: #1A0D0D; /* rodapé / barras       */
  --color-blush: #F6E4E0;      /* fundo blush do hero     */
  --color-blush-deep: #F0D6D0; /* blush mais saturado     */
  --color-cream: #FDF8F4;      /* fundo claro alternativo */
  --color-cream-soft: #F8EDE9; /* seção alternada clara   */
  --color-cream-shell: #EBD6D0;/* placeholders / molduras */

  --color-terracotta: #C27E70;        /* acento principal (títulos/eyebrow) */
  --color-terracotta-line: rgba(194, 126, 112, 0.24); /* bordas sutis      */
  --color-terracotta-tint: rgba(194, 126, 112, 0.10); /* fundos sutis      */
  --color-rose: #B87080;       /* botões / CTA            */
  --color-rose-tint: #FBEEEC;  /* fundo de ícones de dor  */
  --color-whatsapp: #25D366;

  /* compat: tokens antigos apontando para a nova paleta */
  --color-gold: var(--color-terracotta);
  --color-gold-soft: var(--color-terracotta-tint);

  /* ---------- CORES — TEXTO ---------- */
  --text-ink: #1E1010;         /* títulos sobre claro     */
  --text-body: #4A3030;        /* corpo sobre claro       */
  --text-muted: #7A5A5A;       /* secundário sobre claro  */
  --text-on-dark: #FDF8F4;     /* títulos sobre escuro    */
  --text-on-dark-soft: rgba(253, 248, 244, 0.60);
  --text-on-dark-faint: rgba(253, 248, 244, 0.38);

  /* ---------- CORES — LINHAS / SUPERFÍCIES ---------- */
  --line: #EEE5DF;
  --line-soft: #F0E8E0;
  --surface: #FFFFFF;
  --line-on-dark: rgba(194, 126, 112, 0.22);

  /* ---------- TIPOGRAFIA ---------- */
  --font-title: "Cabin", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Escala fluida (clamp = mínimo / preferido / máximo).
     Corrige o problema de "fontes grandes demais" usando
     limites responsivos em vez de tamanhos fixos. */
  --fs-display: clamp(2.75rem, 7vw, 4.5rem);  /* H1 hero      */
  --fs-h2:      clamp(2rem, 4.5vw, 3.25rem);  /* títulos seção*/
  --fs-h3:      clamp(1.4rem, 2.5vw, 2rem);   /* sub-títulos  */
  --fs-lead:    clamp(1.05rem, 1.6vw, 1.25rem);/* parágrafo destaque */
  --fs-body:    1rem;                          /* 16px corpo   */
  --fs-sm:      0.9375rem;                     /* 15px         */
  --fs-xs:      0.8125rem;                     /* 13px         */
  --fs-eyebrow: 0.6875rem;                     /* 11px label   */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  --tracking-eyebrow: 0.18em;
  --tracking-button: 0.12em;

  /* ---------- ESPAÇAMENTO (escala 4px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(4rem, 9vw, 6.5rem); /* padding vertical de seção */
  --gutter: clamp(1.25rem, 5vw, 3.5rem); /* padding horizontal       */

  /* ---------- LARGURAS ---------- */
  --container: 1100px;
  --container-narrow: 760px;

  /* ---------- RAIOS ---------- */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 50px;

  /* ---------- SOMBRAS ---------- */
  --shadow-sm: 0 4px 18px rgba(43, 26, 26, 0.06);
  --shadow-card: 0 10px 40px rgba(43, 26, 26, 0.08);
  --shadow-cta: 0 8px 32px rgba(184, 112, 128, 0.38);
  --shadow-whats: 0 8px 32px rgba(37, 211, 102, 0.30);

  /* ---------- TRANSIÇÕES ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.18s var(--ease);
  --t: 0.28s var(--ease);
}