/* ==========================================================================
   Igreja Santa Teresinha — Design Tokens
   Paleta devocional: marfim, terracota, vinho e dourado.
   Estes tokens são compartilhados por todas as páginas do site.
   ========================================================================== */

:root {
  /* ---------- Cores base ---------- */
  --color-bg: #FAF5EB;              /* marfim / papel */
  --color-bg-soft: #F2E8D8;         /* pergaminho suave, seções alternadas */
  --color-bg-deep: #241814;         /* quase-preto acastanhado, seções de destaque */
  --color-surface: #FFFDF8;         /* cartões sobre o bg claro */

  --color-text: #2B2019;            /* texto principal sobre claro */
  --color-text-soft: #5C4C3E;       /* texto secundário sobre claro */
  --color-text-inverse: #F7EEDD;    /* texto sobre fundo escuro/vinho */
  --color-text-inverse-soft: #D9C7A8;

  --color-brand: #7A2331;           /* vinho — cor de marca */
  --color-brand-dark: #4E1620;      /* vinho profundo */
  --color-brand-light: #9C3F4C;

  --color-accent: #B4863A;          /* dourado — cor de acento */
  --color-accent-light: #D9B876;
  --color-accent-dark: #8C6423;

  --color-border: rgba(43, 32, 25, 0.12);
  --color-border-inverse: rgba(247, 238, 221, 0.18);

  /* ---------- Tipografia ---------- */
  --font-serif: 'Fraunces', 'Georgia', serif;
  --font-sans: 'Manrope', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- Layout ---------- */
  --container-width: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 26px;

  /* ---------- Sombra ---------- */
  --shadow-soft: 0 12px 32px rgba(43, 22, 16, 0.12);
  --shadow-lift: 0 24px 60px rgba(43, 22, 16, 0.18);

  /* ---------- Movimento ---------- */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.28s;
  --dur-base: 0.5s;
  --dur-slow: 0.9s;
}