/* SEMEIA — tokens de design (fonte única de verdade para a landing page)
   Use sempre as variáveis; não escreva cores, tamanhos ou sombras "na mão". */

:root {
  /* ---------- cores da marca (paleta oficial) ---------- */
  --verde: #5E7D4E;          /* principal: logo, botões secundários, títulos grandes */
  --salvia: #A9C28F;         /* apoio: fundos suaves, ilustrações */
  --amarelo: #F9C96B;        /* destaque: selos, preço, estrelas */
  --creme: #FDF6E9;          /* fundo padrão da página */
  --rosa: #F7C6B6;           /* apoio afetivo: fundos de depoimento */
  --terracota: #C97C5E;      /* acento: corações, detalhes, linhas */

  /* ---------- tons derivados (para contraste e estados) ---------- */
  --verde-700: #4A6640;      /* texto verde pequeno e hover de botão (contraste 6,0 no creme) */
  --verde-900: #33472C;
  --verde-100: #E6EEDC;
  --salvia-100: #EEF3E5;
  --amarelo-100: #FEF3D8;
  --rosa-100: #FCE9E2;
  --terracota-700: #A8583C;  /* texto terracota e botão principal (contraste 4,7 / 5,1) */
  --terracota-800: #8C4630;
  --marrom: #8A5A3C;         /* frases manuscritas e assinatura sobre creme */
  --papel: #FFFBF2;          /* cartões e superfícies sobre o creme */
  --branco: #FFFFFF;
  --tinta: #3F3A2B;          /* texto principal */
  --tinta-suave: #6B6557;    /* texto secundário */
  --linha: #EADCC6;          /* bordas e divisórias */

  /* ---------- cores das 5 seções dos cards ---------- */
  --sec-deus: #7E9A4F;
  --sec-jesus: #E0A93B;
  --sec-palavra: #9B86C4;
  --sec-oracao: #E48B90;
  --sec-vivendo: #7FAFCD;

  /* ---------- papéis semânticos ---------- */
  --cor-fundo: var(--creme);
  --cor-superficie: var(--papel);
  --cor-texto: var(--tinta);
  --cor-texto-suave: var(--tinta-suave);
  --cor-titulo: var(--verde-700);
  --cor-acento: var(--terracota);
  --cor-cta: var(--terracota-700);
  --cor-cta-hover: var(--terracota-800);
  --cor-cta-texto: var(--branco);
  --cor-foco: #1F6FEB;

  /* ---------- tipografia ---------- */
  --fonte-texto: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-manuscrita: 'Sacramento', 'Brush Script MT', cursive;   /* só frases curtas */
  --fonte-logo: 'Lobster', cursive;                               /* só o nome "Semeia" */

  --peso-regular: 500;
  --peso-semibold: 600;
  --peso-bold: 700;

  /* escala fluida: mínimo (celular) -> máximo (desktop) */
  --texto-xs: 0.8125rem;                              /* 13px  legendas, selos */
  --texto-sm: 0.9375rem;                              /* 15px  apoio */
  --texto-md: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16–18 corpo */
  --texto-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --titulo-sm: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --titulo-md: clamp(1.625rem, 1.3rem + 1.5vw, 2.375rem);
  --titulo-lg: clamp(2rem, 1.5rem + 2.6vw, 3.25rem);
  --titulo-xl: clamp(2.375rem, 1.6rem + 3.8vw, 4rem);
  --manuscrita-md: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --manuscrita-lg: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);

  --linha-texto: 1.6;
  --linha-titulo: 1.15;
  --espaco-letras-caixa-alta: 0.18em;   /* assinatura e rótulos em caixa alta */

  /* ---------- espaçamento (base 4px) ---------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --secao-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);   /* respiro vertical entre seções */
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); /* margem lateral */

  /* ---------- largura ---------- */
  --largura-texto: 38rem;     /* blocos de leitura */
  --largura-conteudo: 72rem;  /* grade principal */

  /* ---------- forma ---------- */
  --raio-sm: 0.5rem;
  --raio-md: 1rem;
  --raio-lg: 1.75rem;
  --raio-pill: 999px;
  --raio-card: 6.25% / 5%;    /* mesmo canto dos cards impressos (5 mm em 80×100) */

  --sombra-1: 0 1px 2px rgba(63, 58, 43, .06), 0 2px 8px rgba(63, 58, 43, .06);
  --sombra-2: 0 4px 12px rgba(63, 58, 43, .08), 0 12px 32px rgba(63, 58, 43, .10);
  --sombra-cta: 0 6px 18px rgba(168, 88, 60, .35);

  /* ---------- movimento ---------- */
  --rapido: 150ms;
  --medio: 280ms;
  --curva: cubic-bezier(.2, .7, .2, 1);

  /* ---------- pontos de quebra (referência; use em @media) ----------
     celular < 640px · tablet 640–1023px · desktop >= 1024px */
}