/* =====================================================================
   CASAMENTO REACESO · DESIGN TOKENS
   "Acolhimento premium": casa real com acabamento editorial.
   Fonte única de cor, tipo, espaço, raio, sombra e movimento.
   Usado pela página de vendas (inline) e pela área de membros.
   ===================================================================== */
:root {
  /* ---- Cores da marca ---- */
  --creme: #FBF7F3;            /* fundo base */
  --areia: #F3EAE1;            /* seções alternadas */
  --blush: #F3DCD8;            /* cards, destaques */
  --rosa-antigo: #E3BDB6;      /* bordas, ícones, Fase Desarmar (decorativo) */
  --terracota: #B4532A;        /* CTA principal, texto branco (contraste 5,0:1) */
  --terracota-escuro: #8F3F1F; /* hover do CTA */
  --vinho: #7A2E3A;            /* destaque nos títulos (8,6:1 no creme) */
  --dourado: #C9A27A;          /* linhas, selos. Só decorativo: nunca texto */
  --texto: #2B2422;            /* grafite quente */
  --texto-suave: #6B5E58;      /* 7,3:1 no creme · 5,9:1 no blush */
  --branco: #FFFFFF;

  /* ---- Variações de apoio (derivadas, com contraste AA para texto) ---- */
  --rosa-antigo-texto: #8E4F47;  /* texto sobre creme na cor da Fase Desarmar (5,9:1) */
  --blush-claro: #F9ECEA;
  --linha: #E8DCD3;              /* bordas neutras */
  --sombra-cor: 58 34 26;        /* rgb da sombra quente */

  /* ---- Cores das fases do protocolo ---- */
  --fase-desarmar: var(--rosa-antigo);
  --fase-desarmar-texto: var(--rosa-antigo-texto);
  --fase-aproximar: var(--terracota);
  --fase-aproximar-texto: var(--terracota);
  --fase-reacender: var(--vinho);
  --fase-reacender-texto: var(--vinho);

  /* ---- Tipografia ---- */
  --fonte-titulo: "Lora", "Lora Fallback", Georgia, "Times New Roman", serif;
  --fonte-corpo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tamanho-corpo: 1.125rem;      /* 18px: mínimo do corpo no celular */
  --altura-linha: 1.6;
  --tamanho-pequeno: 0.9375rem;   /* 15px: legendas e fontes de estudo */
  --tamanho-h1: clamp(1.75rem, 1.1rem + 3.2vw, 2.75rem);
  --tamanho-h2: clamp(1.5rem, 1.1rem + 2vw, 2.125rem);
  --tamanho-h3: clamp(1.25rem, 1.05rem + 1vw, 1.5rem);
  --peso-titulo: 600;
  --peso-titulo-forte: 700;

  /* ---- Espaço (escala de 4px) ---- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;
  --gutter: 1rem;                 /* 16px de margem lateral no celular */
  --coluna-leitura: 42.5rem;      /* 680px */

  /* ---- Forma ---- */
  --raio: 16px;
  --raio-grande: 20px;
  --raio-pilula: 999px;
  --sombra-suave: 0 1px 2px rgb(var(--sombra-cor) / 0.06), 0 4px 16px rgb(var(--sombra-cor) / 0.07);
  --sombra-media: 0 2px 4px rgb(var(--sombra-cor) / 0.07), 0 12px 32px rgb(var(--sombra-cor) / 0.10);
  --sombra-cta: 0 6px 18px rgb(180 83 42 / 0.28);

  /* ---- Interação ---- */
  --altura-botao: 3.25rem;        /* 52px mínimo */
  --foco: 0 0 0 3px var(--creme), 0 0 0 5px var(--vinho);
  --duracao-rapida: 160ms;
  --duracao-media: 320ms;
  --duracao-lenta: 600ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Camadas ---- */
  --z-fixo: 50;
  --z-sair: 60;
  --z-modal: 80;
}

@media (min-width: 48em) {
  :root {
    --tamanho-corpo: 1.1875rem;   /* 19px no desktop */
    --gutter: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracao-rapida: 0ms;
    --duracao-media: 0ms;
    --duracao-lenta: 0ms;
  }
}