/* ============================================================
   IDF Kenya — Design Tokens
   Single source of truth for all brand values.
   Edit here to retheme the entire site.
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --idf-navy:           #1B2E4B;
  --idf-navy-dark:      #0f1e33;
  --idf-navy-light:     #2a4470;
  --idf-blue:           #2E6DB4;
  --idf-blue-light:     #5B9BD5;
  --idf-blue-pale:      #EBF3FB;
  --idf-green:          #3A7D44;
  --idf-green-light:    #52a85f;
  --idf-green-pale:     #EAF4EB;
  --idf-cream:          #F8FAFF;
  --idf-white:          #FFFFFF;

  /* ---- Text ---- */
  --idf-text:           #1a1a2e;
  --idf-text-mid:       #3d4560;
  --idf-text-muted:     #6b7280;

  /* ---- Borders ---- */
  --idf-border:         rgba(27, 46, 75, 0.10);

  /* ---- Shadows ---- */
  --idf-shadow-sm:      0 2px 10px rgba(27, 46, 75, 0.07);
  --idf-shadow-md:      0 8px 30px rgba(27, 46, 75, 0.13);
  --idf-shadow-lg:      0 20px 60px rgba(27, 46, 75, 0.18);
  --idf-shadow-xl:      0 32px 80px rgba(27, 46, 75, 0.26);

  /* ---- Typography ---- */
  --font-display:       'Playfair Display', Georgia, serif;
  --font-sans:          'DM Sans', system-ui, sans-serif;

  /* ---- Easing ---- */
  --ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-circ:   cubic-bezier(0.85, 0, 0.15, 1);
  --transition-fast:    0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-mid:     0.4s  cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:    0.6s  cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout ---- */
  --container-max:      1280px;
  --container-pad:      clamp(1.5rem, 5vw, 3rem);
  --section-gap:        72px;
  --section-gap-sm:     48px;

  /* ---- Border radius ---- */
  --r-sm:   4px;
  --r-md:   10px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-2xl:  40px;

  /* ---- Header ---- */
  --header-height:      5.5rem;
  --navbar-height:      72px;
  --header-z:           1000;
  --logo-width-desktop: 48px;
  --logo-height-desktop: 48px;

  /* ---- Footer ---- */
  --footer-bg:          var(--idf-navy-dark);
  --footer-text:        rgba(255, 255, 255, 0.85);
  --footer-text-mid:    rgba(255, 255, 255, 0.65);
  --footer-text-light:  rgba(255, 255, 255, 0.45);
  --footer-border:      rgba(255, 255, 255, 0.08);
  --footer-hover:       var(--idf-green-light);

  /* ---- Sidenav ---- */
  --sidenav-width:      240px;
  --story-img-pct:      58%;
}