/* ============================================================
   COHF — Design tokens
   "Hope growing into lasting change."
   ============================================================ */

:root {
  /* ---- Brand colour ---------------------------------------- */
  --c-forest-900: #10261d;   /* deepest ground */
  --c-forest-800: #16342a;
  --c-forest-700: #1d4634;   /* Hope Green — primary */
  --c-forest-600: #2a5c45;
  --c-forest-500: #3a7a5b;
  --c-sage-300:   #9fb8a6;
  --c-sage-200:   #c4d4c6;
  --c-sage-100:   #e3ebe3;

  --c-terracotta-700: #8a3f22;
  --c-terracotta-600: #a9502c;  /* Warm Earth — secondary */
  --c-terracotta-400: #c97a55;
  --c-terracotta-100: #f3e1d7;

  --c-gold-600: #b8860f;
  --c-gold-500: #d9a227;        /* Sunlight — accent */
  --c-gold-300: #eccb7c;
  --c-gold-100: #f8eed4;

  --c-cream:      #f7f3ea;      /* soft cream */
  --c-warm-white: #fcfaf6;
  --c-white:      #ffffff;
  --c-charcoal:   #1c1b19;
  --c-ink:        #24231f;
  --c-ink-soft:   #4d4a44;
  --c-rule:       #e2ddd2;

  /* ---- Semantic roles -------------------------------------- */
  --bg:            var(--c-warm-white);
  --bg-alt:        var(--c-cream);
  --bg-deep:       var(--c-forest-800);
  --surface:       var(--c-white);
  --text:          var(--c-ink);
  --text-soft:     var(--c-ink-soft);
  --text-invert:   #f4f1e9;
  --primary:       var(--c-forest-700);
  --primary-hover: var(--c-forest-800);
  --secondary:     var(--c-terracotta-600);
  --accent:        var(--c-gold-500);
  --rule:          var(--c-rule);
  --focus:         var(--c-gold-500);

  /* ---- Section accents (used sparingly, never decoratively) - */
  --accent-programmes:  var(--c-terracotta-600);
  --accent-impact:      var(--c-gold-600);
  --accent-approach:    var(--c-forest-600);
  --accent-partnership: var(--c-forest-500);
  --accent-governance:  var(--c-charcoal);

  /* ---- Typography ------------------------------------------ */
  --font-display: "Fraunces", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem);
  --fs-small:   clamp(0.84rem, 0.8rem + 0.2vw, 0.92rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.25vw, 1.08rem);
  --fs-lead:    clamp(1.12rem, 1.02rem + 0.5vw, 1.34rem);
  --fs-h4:      clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-h3:      clamp(1.32rem, 1.1rem + 0.9vw, 1.72rem);
  --fs-h2:      clamp(1.7rem, 1.3rem + 1.7vw, 2.75rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  --fs-hero:    clamp(2.4rem, 1.4rem + 4.2vw, 4.6rem);

  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-body: 1.65;
  --measure: 66ch;
  --measure-tight: 52ch;

  /* ---- Spacing (8pt-derived, fluid) ------------------------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: clamp(4rem, 3rem + 5vw, 7rem);
  --space-4xl: clamp(5.5rem, 4rem + 7vw, 10rem);

  /* ---- Layout ---------------------------------------------- */
  --wrap: 78rem;
  --wrap-wide: 92rem;
  --wrap-narrow: 46rem;
  --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 3rem);

  /* ---- Shape & depth (restrained: no bubbly cards) ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-sm: 0 1px 2px rgba(28, 27, 25, 0.06);
  --shadow-md: 0 12px 30px -18px rgba(28, 27, 25, 0.35);
  --shadow-lg: 0 28px 60px -34px rgba(28, 27, 25, 0.45);

  /* ---- Motion ---------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  --header-h: 5rem;
}

@media (max-width: 47.9375em) {
  :root { --header-h: 4.25rem; }
}

/* Honour user motion settings globally. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}