/* ==========================================================================
   Elken Africa — design tokens
   Single source for colour, type and layout. These map 1:1 onto Elementor
   Global Colors and Global Fonts when the site moves to WordPress.
   ========================================================================== */

:root {
  /* Colour — Figma "01 - Foundations" ------------------------------------ */
  --ek-blue:            #202259;  /* Deep Vital Blue      */
  --ek-blue-hover:      #0F1034;  /* Button hover         */
  --ek-pink:            #F287B7;  /* Radiant Bloom Pink   */
  --ek-aqua:            #2AA7CF;  /* Aqua Energy Blue     */
  --ek-aqua-hover:      #1B96BD;  /* Aqua hover           */
  --ek-error:           #B3261E;  /* Form error — 5.9:1 on white, and it is
                                     not a brand colour on purpose: nothing
                                     else on the site is red, so it can only
                                     read as a problem. */
  --ek-error-tint:      #FDF3F2;  /* the field ground behind it */
  --ek-charcoal:        #25292C;  /* Charcoal Core        */
  --ek-charcoal-deep:   #0D1417;  /* Footer ground */
  --ek-footer-fine:     #3E4244;  /* Footer bottom-bar fine print, Figma fill      */
  --ek-steel:           #859EB3;  /* Calm Steel Blue      */
  --ek-blush:           #EDC4C2;  /* Soft Blush Nude      */
  --ek-mauve:           #B57A99;  /* Elegant Mauve Rose   */
  --ek-grey-light:      #F4F5F5;  /* Pure Light Grey      */
  --ek-grey-mid:        #ECECEC;  /* Pure Mid Grey        */
  /* Scrim over photography, as channels so rgba() can take an alpha.
     Neutral on purpose — see the note in pages.css. */
  --ek-scrim-rgb:       23, 25, 27;
  --ek-panel-cool:      #E9EEF2;  /* Panel fill on --ek-ground-light. Pure Mid Grey is
                                     neutral and reads warm against that cool ground. */
  --ek-grey-out:        #D1D8DE;  /* Grey Out / disabled  */
  --ek-white:           #FFFFFF;  /* Pure White           */
  --ek-body-ink:        #27282B;  /* Body copy            */

  /* Statistic panels — Figma "Sec - StatsIntroSection" -------------------- */
  --ek-stat-1:          #0B1944;
  --ek-stat-2:          #152964;
  --ek-stat-3:          #223A81;

  /* Grounds --------------------------------------------------------------- */
  --ek-ground-light:    linear-gradient(118deg, #FBFCFC 0%, #F3F6F9 52%, #E9EEF5 100%);
  --ek-scrim-dark:      linear-gradient(90deg, rgba(13,15,19,.84) 0%, rgba(13,15,19,.66) 30%, rgba(13,15,19,0) 62%);

  /* Type ------------------------------------------------------------------ */
  --ek-font: Montserrat, "Helvetica Neue", Arial, sans-serif;

  --ek-h1:      60px;  --ek-h1-lh: 1.1;   --ek-h1-ls: -2px;
  --ek-h2:      33px;  --ek-h2-lh: 1.2;
  --ek-h3:      23px;  --ek-h3-lh: 1.25;
  --ek-h4:      18px;  --ek-h4-lh: 1.3;
  --ek-lead:    16px;  --ek-lead-lh: 1.5;
  --ek-text:    15px;  --ek-text-lh: 1.5;
  --ek-small:   14px;  --ek-small-lh: 1.4;
  --ek-caption: 12px;  --ek-caption-lh: 1.3;
  --ek-eyebrow: 18px;

  /* Layout — measured off the Figma pages, drawn at 1920 ------------------ */
  --ek-nav-max:      1605px;   /* header and footer band   */
  --ek-content-max:  1408px;   /* every section's content  */
  --ek-page-pad:     48px;
  --ek-section-pad:  130px;

  /* Spacing scale --------------------------------------------------------- */
  --ek-4: 4px;   --ek-8: 8px;   --ek-12: 12px; --ek-16: 16px; --ek-24: 24px;
  --ek-32: 32px; --ek-40: 40px; --ek-56: 56px; --ek-76: 76px; --ek-120: 120px;

  /* Motion ---------------------------------------------------------------- */
  --ek-ease: cubic-bezier(.4, 0, .2, 1);
  --ek-fast: .2s;
  --ek-slow: .7s;
}

@media (max-width: 1199px) {
  :root {
    --ek-h1: 44px; --ek-h1-ls: -1.2px;
    --ek-h2: 29px;
    --ek-eyebrow: 16px;
    --ek-page-pad: 40px;
    --ek-section-pad: 88px;
  }
}

@media (max-width: 767px) {
  :root {
    --ek-h1: 34px; --ek-h1-ls: -1px;
    --ek-h2: 27px;
    --ek-h3: 20px;
    --ek-h4: 16px;
    --ek-lead: 15px;
    --ek-text: 14px;
    --ek-eyebrow: 15px;
    --ek-page-pad: 20px;
    --ek-section-pad: 60px;
  }
}