/* ============================================================
   PALPER Design System — Colors & Type
   ============================================================
   Palette is sourced directly from the PALPER logo:
   - Blue arc text → trust, water, partnership
   - Green seedling → growth, agriculture, hope
   - Terracotta pot → earth, place, community roots
   - Red wordmark → urgency, action, the present moment
   - Cream/paper white → page, dignity, breathing room
   - Ink → grounded text, never pure black
   ============================================================ */

:root {
  /* ---------- Brand Core ---------- */
  --palper-blue:        #1F5FA8;   /* logo arc text */
  --palper-blue-deep:   #163E73;   /* hover / heading accent */
  --palper-blue-soft:   #DCE7F3;   /* tinted bg, info chips */

  --palper-green:       #4F8B3B;   /* seedling */
  --palper-green-deep:  #36621F;
  --palper-green-soft:  #E1ECD8;

  --palper-terra:       #B85F3A;   /* pot, soil */
  --palper-terra-deep:  #8A4022;
  --palper-terra-soft:  #F3DDD0;

  --palper-red:         #C8332B;   /* PALPER wordmark, urgent CTA */
  --palper-red-deep:    #962219;
  --palper-red-soft:    #F5D9D5;

  --palper-sun:         #E8A630;   /* warm accent for stats / sun */
  --palper-sun-soft:    #FAEAC9;

  /* ---------- Neutrals (warm, never cold gray) ---------- */
  --paper:              #FBF7F1;   /* default page bg */
  --paper-dim:          #F2ECE0;   /* alt sections */
  --paper-deep:         #E6DDCB;   /* dividers, soft borders */
  --ink:                #1B1A17;   /* primary text — warm near-black */
  --ink-soft:           #3D3A33;
  --ink-mute:           #6B6659;
  --ink-faint:          #9A9486;
  --hairline:           #D8CFB9;

  /* ---------- Semantic Colors ---------- */
  --bg:                 var(--paper);
  --bg-alt:             var(--paper-dim);
  --surface:            #FFFFFF;
  --surface-sunk:       var(--paper-dim);
  --fg1:                var(--ink);
  --fg2:                var(--ink-soft);
  --fg3:                var(--ink-mute);
  --fg4:                var(--ink-faint);
  --border:             var(--hairline);
  --border-strong:      var(--paper-deep);

  --primary:            var(--palper-blue);
  --primary-hover:      var(--palper-blue-deep);
  --primary-soft:       var(--palper-blue-soft);
  --on-primary:         #FFFFFF;

  --accent:             var(--palper-red);    /* CTA / urgency */
  --accent-hover:       var(--palper-red-deep);
  --on-accent:          #FFFFFF;

  --success:            var(--palper-green);
  --warning:            var(--palper-sun);
  --danger:             var(--palper-red);

  /* ---------- Typography ---------- */
  /* Headings — Lora: a humanist serif with warmth, fits NGO/literary tone.
     Body — Source Sans 3: open, legible, multilingual (FR + EN). */
  --font-display: "Lora", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — modular (1.250 major third), 16px base */
  --fs-12: 0.75rem;    /* 12 — micro / caption */
  --fs-14: 0.875rem;   /* 14 — small / meta */
  --fs-16: 1rem;       /* 16 — body */
  --fs-18: 1.125rem;   /* 18 — lede */
  --fs-20: 1.25rem;    /* 20 — body-lg */
  --fs-24: 1.5rem;     /* 24 — h4 */
  --fs-30: 1.875rem;   /* 30 — h3 */
  --fs-36: 2.25rem;    /* 36 — h2 */
  --fs-48: 3rem;       /* 48 — h1 */
  --fs-64: 4rem;       /* 64 — display */
  --fs-80: 5rem;       /* 80 — hero display */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;   /* eyebrow / kicker */

  /* ---------- Spacing (8pt + 4 micro) ---------- */
  --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;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------- Shadows (warm, not blue-gray) ---------- */
  --shadow-1: 0 1px 2px rgba(74, 56, 30, 0.06), 0 1px 1px rgba(74, 56, 30, 0.04);
  --shadow-2: 0 4px 12px rgba(74, 56, 30, 0.08), 0 1px 2px rgba(74, 56, 30, 0.05);
  --shadow-3: 0 12px 28px rgba(74, 56, 30, 0.12), 0 2px 6px rgba(74, 56, 30, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(74,56,30,0.06);
  --focus-ring: 0 0 0 3px rgba(31, 95, 168, 0.32);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:    140ms;
  --t-base:    220ms;
  --t-slow:    420ms;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 800px;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html { color-scheme: light; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Eyebrow / kicker — used over section titles like "Priorities", "Who We Are" */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--palper-blue);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  color: var(--fg1);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  text-wrap: pretty;
  max-width: 65ch;
}

.lede {
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  text-wrap: pretty;
  max-width: 60ch;
}

small, .small { font-size: var(--fs-14); color: var(--fg3); }
.caption { font-size: var(--fs-12); color: var(--fg3); letter-spacing: 0.02em; }

a {
  color: var(--palper-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--palper-blue-deep); }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-6) 0;
}

/* Stat numbers — used for "400,000 displaced", "94% non-functional" */
.stat-number {
  font-family: var(--font-display);
  font-size: var(--fs-64);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--palper-red);
}