/* ===========================================================
   HIF Design Tokens — extracted from Figma (HIF-NEW)
   Loaded site-wide. Widgets reference these CSS variables.
   =========================================================== */
:root {
  /* Brand */
  --hif-primary: #3e66a7;        /* primary blue: buttons, stats bar, footer */
  --hif-primary-dark: #0055a5;   /* deep navy accent */
  --hif-accent: #1e40af;         /* glow / accent */

  /* Blues / tints */
  --hif-blue-50: #eff6ff;
  --hif-blue-100: #dbeafe;
  --hif-blue-200: #bfdbfe;
  --hif-green-tint: #f2f8f4;     /* donation amount button fill */

  /* Neutrals */
  --hif-ink: #111827;            /* near-black text */
  --hif-gray-700: #374151;
  --hif-gray-600: #4b5563;       /* nav links */
  --hif-gray-500: #6b7280;
  --hif-border: #e5e7eb;
  --hif-border-light: #f3f4f6;
  --hif-white: #ffffff;

  /* Typography */
  --hif-font-display: "Playfair Display", Georgia, serif;  /* headings / stats */
  --hif-font-sans: "Inter", -apple-system, system-ui, sans-serif; /* body / UI */
  --hif-font-brand: "Montserrat", var(--hif-font-sans);    /* footer brand */

  /* Radii */
  --hif-radius-sm: 6px;
  --hif-radius: 8px;
  --hif-radius-lg: 16px;
  --hif-radius-pill: 9999px;

  /* Shadows */
  --hif-shadow-sm: 0px 1px 1px rgba(0,0,0,0.05);
  --hif-shadow-btn: 0px 4px 20px -2px rgba(0,0,0,0.05);
  --hif-shadow-card: 0px 4px 20px -2px rgba(0,0,0,0.08);

  /* Layout */
  --hif-container: 1280px;
}

/* Base */
body { font-family: var(--hif-font-sans); color: var(--hif-gray-700); }
h1,h2,h3 { font-family: var(--hif-font-display); }
.hif-container { max-width: var(--hif-container); margin-inline: auto; width: 100%; }