/* ============================================================
   ESPERANÇA EM COLUMBUS — Design Tokens
   Estética: editorial premium (Apple + revista + comunidade)
   Base: off-white creme / preto profundo / dourado / verde WhatsApp
   ============================================================ */

:root {
  /* ---- Cores ---- */
  --bg: #FAF7F2;            /* off-white creme */
  --bg-soft: #F3EDE3;       /* creme levemente mais escuro (seções alternadas) */
  --ink: #1C1917;           /* preto profundo quente */
  --ink-2: #292524;
  --muted: #6B6259;         /* texto secundário */
  --faint: #9C9288;         /* texto terciário */
  --line: #E7DFD4;          /* bordas suaves */
  --card: #FFFFFF;
  --card-hover: #FDFBF7;
  --gold: #C9A227;          /* dourado discreto */
  --gold-soft: #F3E8CB;
  --gold-ink: #8A6D1F;
  --green: #25D366;         /* WhatsApp */
  --green-deep: #128C7E;    /* texto em botão branco */
  --ink-bg: #1C1917;        /* fundo preto (blocos de contraste) */
  --on-ink: #FAF7F2;
  --on-ink-muted: rgba(250,247,242,.72);

  /* ---- Tipografia ---- */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  /* ---- Escala ---- */
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-md: 16px;
  --fs-lg: 19px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 42px;
  --fs-hero: clamp(34px, 8.5vw, 68px);

  /* ---- Espaçamento ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- Raio ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-full: 999px;

  /* ---- Sombras (sutis) ---- */
  --shadow-sm: 0 1px 2px rgba(28,25,23,.05), 0 1px 3px rgba(28,25,23,.04);
  --shadow-md: 0 4px 14px rgba(28,25,23,.07);
  --shadow-lg: 0 16px 40px rgba(28,25,23,.12);

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur-med: 260ms;
  --dur-slow: 500ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);

  /* ---- Layout ---- */
  --container: 1080px;
  --header-h: 64px;
  --bar-mobile-h: 58px;

  /* ---- Acento de marca ---- */
  --brand-gradient: linear-gradient(135deg, #C9A227 0%, #E3B94A 55%, #C9A227 100%);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}