/* ============================================================
   Humanity First — Design Tokens
   Brand colors lifted directly from the official branding PDF
   (Branding_Doc_Humanity First Logo_V2_R02_.pdf)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap');

:root {
  /* ---------- Primary brand ---------- */
  --hf-blue:        #0069B4;   /* Humanity First Blue — primary */
  --hf-blue-dark:   #00568f;   /* hover / pressed */
  --hf-blue-darker: #003e6a;   /* footers, deep backgrounds */
  --hf-blue-50:     #e6f0f8;   /* tinted backgrounds */
  --hf-blue-100:    #cce0f1;

  /* ---------- 8 Programme colours (from PDF) ---------- */
  --pg-disaster-relief:    #E30613; /* Disaster Relief — Red */
  --pg-community-care:     #E14E12; /* Community Care — Orange-Red */
  --pg-orphan-care:        #F39200; /* Orphan Care — Yellow/Orange */
  --pg-food-security:      #B17F4A; /* Food Security — Brown/Gold */
  --pg-knowledge-for-life: #17775C; /* Knowledge for Life — Green */
  --pg-water-for-life:     #0069B4; /* Water for Life — Blue (same as primary) */
  --pg-global-health:      #1B2B73; /* Global Health — Navy (from logo PNG) */
  --pg-gift-of-sight:      #6C1C5A; /* Gift of Sight — Purple */
  --pg-magenta:            #B81867; /* secondary accent from PDF */

  /* ---------- Neutrals ---------- */
  --neutral-0:    #ffffff;
  --neutral-50:   #fafafa;
  --neutral-100:  #f4f4f4;
  --neutral-200:  #e8e8e8;
  --neutral-300:  #d4d4d4;
  --neutral-400:  #a3a3a3;
  --neutral-500:  #737373;
  --neutral-600:  #525252;
  --neutral-700:  #404040;
  --neutral-800:  #262626;
  --neutral-900:  #171717;

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--neutral-800);   /* body */
  --fg-2: var(--neutral-600);   /* secondary text */
  --fg-3: var(--neutral-500);   /* meta, captions */
  --fg-inverse: var(--neutral-0);
  --link: var(--hf-blue);
  --link-hover: var(--hf-blue-dark);

  /* ---------- Semantic background ---------- */
  --bg-page:    var(--neutral-0);
  --bg-surface: var(--neutral-0);
  --bg-muted:   var(--neutral-100);
  --bg-inverse: var(--hf-blue-darker);

  /* ---------- Borders / dividers ---------- */
  --border:     var(--neutral-200);
  --border-strong: var(--neutral-300);

  /* ---------- Type ---------- */
  --font-sans: 'Mulish', 'Segoe UI', Tahoma, sans-serif;
  /* Substitution note: brand uses a Frutiger/Univers-family humanist sans
     in printed materials. Mulish is the closest free Google Font match.
     If the brand provides Frutiger / Source Sans / TheSans files, swap in. */

  /* Type scale */
  --fs-display: clamp(2.5rem, 4.5vw, 4.25rem);  /* hero H1 */
  --fs-h1:      clamp(2rem, 3.2vw, 3rem);
  --fs-h2:      clamp(1.625rem, 2.4vw, 2.25rem);
  --fs-h3:      1.375rem;   /* 22px */
  --fs-h4:      1.125rem;   /* 18px */
  --fs-body:    1rem;       /* 16px */
  --fs-small:   0.875rem;   /* 14px */
  --fs-xs:      0.75rem;    /* 12px */

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  /* Letter-spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:    0.04em;
  --tracking-button:  0.08em;  /* used in CTA buttons */

  /* ---------- Spacing scale (8pt) ---------- */
  --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;

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.14);

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 880px;
  --header-h: 96px;
  --topbar-h: 36px;

  /* ---------- Transitions ---------- */
  --t-fast: 120ms ease;
  --t:      180ms ease;
  --t-slow: 320ms ease;
}

/* ============================================================
   Element defaults
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
a { color: var(--link); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* Section heading style used across the site (centered, blue underline) */
.section-heading {
  text-align: center;
  text-transform: uppercase;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-7);
  position: relative;
  padding-bottom: var(--space-4);
}
.section-heading::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 56px; height: 3px;
  background: var(--hf-blue);
  border-radius: 2px;
}

/* Button system */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
  text-decoration: none;
  line-height: 1;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary   { background: var(--hf-blue); color: #fff; }
.btn--primary:hover { background: var(--hf-blue-dark); color: #fff; }

.btn--donate    { background: #e30613; color: #fff; } /* heart-red donate CTA */
.btn--donate:hover { background: #c00510; color: #fff; }

.btn--outline   { background: transparent; color: var(--hf-blue); border-color: var(--hf-blue); }
.btn--outline:hover { background: var(--hf-blue); color: #fff; }

.btn--ghost     { background: transparent; color: var(--fg-1); }
.btn--ghost:hover { background: var(--neutral-100); }

.btn--lg { padding: 16px 36px; font-size: var(--fs-body); }
.btn--sm { padding: 8px 18px; font-size: var(--fs-xs); }

/* Container */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.container--narrow { max-width: var(--container-narrow); }

/* Section spacing */
.section { padding: var(--space-9) 0; }
.section--tight { padding: var(--space-7) 0; }