/**
 * Move Forwards — design tokens.
 *
 * Colour is sampled directly from logo.JPG (see Phase 1 architecture
 * doc), not guessed: navy #0D2144, green #5E9A1E, sky blue #74A5CE,
 * orange #E8862A. Text/UI shades below are those same hues deepened
 * or lightened for contrast, never a different hue substituted in.
 *
 * Two type families carry the bilingual brief: Poppins (a bold
 * geometric sans — the face most NGO/nonprofit sites reach for on
 * headlines) paired with Public Sans (a civic, highly-legible sans
 * used across many government/international-org design systems) for
 * body and UI text.
 * Tamil content renders in Noto Sans Tamil throughout — chosen for
 * legibility over decoration, per the brief — applied via [lang="ta"]
 * so English and Tamil each get the face suited to their script.
 */

:root{
  /* ---- Colour: brand ------------------------------------------------ */
  --c-navy:        #0D2144;
  --c-navy-700:    #16305F;
  --c-navy-900:    #08182F;
  --c-green:       #3F7A1F;   /* deepened from sampled #5E9A1E for AA text contrast */
  --c-green-600:   #336418;
  --c-green-100:   #E9F1DE;
  --c-sky:         #2F6693;   /* deepened from sampled #74A5CE */
  --c-sky-100:     #E7F0F7;
  --c-gold:        #C2650F;   /* deepened from sampled #E8862A */
  --c-gold-100:    #FBEEE0;

  /* ---- Colour: neutrals & surfaces ------------------------------------ */
  --c-ink:         #0D2144;   /* headings */
  --c-ink-soft:    #46536A;   /* secondary text */
  --c-body:        #3A4757;   /* running body copy */
  --c-faint:       #7C879A;   /* captions, meta */
  --c-white:       #FFFFFF;
  --c-bg:          #FFFFFF;
  --c-bg-alt:      #F5F7F2;   /* warm-cool neutral, slight green undertone */
  --c-bg-navy:     #0D2144;
  --c-border:      #E1E6DC;
  --c-border-strong: #C7D0C2;

  /* ---- Semantic ------------------------------------------------------- */
  --c-success:  var(--c-green);
  --c-warning:  var(--c-gold);
  --c-danger:   #B3261E;
  --c-info:     var(--c-sky);

  /* ---- Type ------------------------------------------------------------ */
  --font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ta:      'Noto Sans Tamil', 'Public Sans', sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.3125rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  2.875rem;
  --text-5xl:  clamp(3rem, 2.3rem + 2.8vw, 4.25rem);

  --leading-tight: 1.18;
  --leading-snug:  1.35;
  --leading-normal: 1.65;

  /* ---- Space ------------------------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-section: clamp(56px, 8vw, 112px);

  /* ---- Shape / elevation ------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(13,33,68,.06);
  --shadow-md: 0 6px 20px -8px rgba(13,33,68,.18);
  --shadow-lg: 0 20px 45px -18px rgba(13,33,68,.30);

  /* ---- Layout ------------------------------------------------------------ */
  --container-max: 1220px;
  --container-pad: 24px;
  --header-h: 84px;

  --ease: cubic-bezier(.4,0,.2,1);
}

@media (max-width: 640px){
  :root{
    --container-pad: 18px;
    --header-h: 68px;
    --sp-section: 56px;
  }
}