/* Design tokens — Diocesan Office of Hispanic Ministry Site
   Aligned to designer PDFs (May 2026)
*/
:root {
  /* ---- Brand colors ---- */
  --color-navy-900: #0F2E4D;    /* page titles, primary buttons, footer */
  --color-navy-800: #143A60;    /* hover / lighter navy */
  --color-blue-600: #0A8FCE;    /* secondary accents only */
  --color-gold-500: #C9A33A;    /* shield, "> Inscribirse" links */
  --color-gold-400: #D6B868;    /* gold hover */
  --color-taupe-600: #8C7E6B;   /* top ribbon + secondary CTA button */
  --color-taupe-500: #9D907D;   /* taupe hover */

  /* ---- Neutrals ---- */
  --color-ink: #111827;
  --color-text: #374151;
  --color-muted: #6B7280;

  --color-bg: #FFFFFF;
  --color-bg-subtle: #F7F8FA;
  --color-card-bg: #EFEBE4;     /* warm pale gray for feature cards (matches PDF) */
  --color-card-bg-hover: #E7E2D9;

  --color-border: #E5E7EB;
  --color-divider: #D1D5DB;

  --color-focus: #7DD3FC;
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-danger: #DC2626;

  /* ---- Typography ---- */
  --font-heading: "Cinzel", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-h1: 48px;
  --text-h2: 36px;
  --text-h3: 28px;
  --text-h4: 22px;
  --text-body: 16px;
  --text-small: 14px;
  --text-micro: 12px;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  --ls-tight: -0.02em;
  --ls-normal: 0em;
  --ls-wide: 0.12em;     /* for small-caps eyebrow labels */

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Radius + shadow ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.10);
  --shadow-card: 0 2px 6px rgba(17, 24, 39, 0.08), 0 8px 20px rgba(17, 24, 39, 0.06);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: 24px;
  --container-narrow: 820px;    /* for centered page intros */
}