/* ============================================================
   MANAHEL AL JAZEERA — BRAND TOKENS
   Source: MJS Brand Guidelines v2 (يوليو 2025)
   ------------------------------------------------------------
   THIS IS THE ONLY FILE YOU EDIT TO RE-SKIN THE SITE.
   Every colour, font and radius on the site reads from here.
   ============================================================ */

:root {

  /* ---- CORE PALETTE (official, do not alter without designer sign-off) ---- */
  --brand-blue:        #2B65D9;   /* Primary Blue   — 40% — PMS 2175 C */
  --brand-green:       #4CAF50;   /* Supportive Grn — 40% — PMS 7481 C */
  --brand-yellow:      #FFD600;   /* Accent Yellow  — 20% — PMS 109 C  */

  /* ---- TINTS & SHADES (derived, for UI states) ---- */
  --blue-900:          #12306B;
  --blue-800:          #1B4296;
  --blue-700:          #2353B8;
  --blue-600:          #2B65D9;
  --blue-500:          #4C7FE0;
  --blue-300:          #9DBAEF;
  --blue-100:          #E3EBFB;
  --blue-50:           #F2F6FD;

  --green-900:         #1E5C21;
  --green-800:         #2E7D32;
  --green-700:         #3C9440;
  --green-600:         #4CAF50;
  --green-300:         #A5D7A7;
  --green-100:         #E6F4E7;
  --green-50:          #F3FAF3;

  --yellow-700:        #C9A800;
  --yellow-600:        #FFD600;
  --yellow-300:        #FFE866;
  --yellow-100:        #FFF8CC;

  /* ---- SURFACES (sampled from the guideline artboards) ---- */
  --surface-cream:     #FFFDF5;   /* default page background */
  --surface-mint:      #F8FFF8;   /* alternating section background */
  --surface-white:     #FFFFFF;   /* cards */
  --surface-ink:       #0E1B33;   /* dark sections / footer */

  /* ---- TEXT ---- */
  --text-strong:       #0E1B33;
  --text-body:         #33415C;
  --text-muted:        #6B7897;
  --text-onDark:       #F4F7FF;
  --text-onDarkMuted:  #AFBDD8;

  /* ---- LINES ---- */
  --line:              #E6E9F2;
  --line-strong:       #CFD6E6;

  /* ---- TYPOGRAPHY ----
     Brand primary typeface is "Saudia Sans" (licensed).
     Drop the webfont files into assets/fonts/ and they are picked up
     automatically by the @font-face block below. Until then the stack
     falls back to IBM Plex Sans Arabic, the closest free match.      */
  --font-brand: "Saudia Sans", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body:  "Saudia Sans", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  --fs-display: clamp(2.1rem, 1.3rem + 3.4vw, 4.1rem);
  --fs-h1:      clamp(1.85rem, 1.25rem + 2.4vw, 3.1rem);
  --fs-h2:      clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;

  --lh-tight:   1.25;
  --lh-head:    1.4;
  --lh-body:    1.95;   /* Arabic needs generous leading */

  /* ---- SHAPE ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- ELEVATION ---- */
  --shadow-sm: 0 1px 2px rgba(14,27,51,.06), 0 2px 8px rgba(14,27,51,.05);
  --shadow-md: 0 4px 10px rgba(14,27,51,.07), 0 12px 28px rgba(14,27,51,.07);
  --shadow-lg: 0 10px 24px rgba(14,27,51,.09), 0 28px 60px rgba(14,27,51,.10);

  /* ---- LAYOUT ---- */
  --container: 1200px;
  --gutter: 20px;
  --section-y: clamp(3.5rem, 2rem + 5vw, 6.5rem);

  /* ---- MOTION ---- */
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur: .28s;
}

/* ============================================================
   SELF-HOSTED BRAND FONT (optional)
   Place these files in assets/fonts/ and they activate instantly:
     SaudiaSans-Regular.woff2
     SaudiaSans-Medium.woff2
     SaudiaSans-Bold.woff2
   If the files are absent the browser silently falls back.
   ============================================================ */
@font-face{
  font-family:"Saudia Sans";
  src:url("../fonts/SaudiaSans-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Saudia Sans";
  src:url("../fonts/SaudiaSans-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Saudia Sans";
  src:url("../fonts/SaudiaSans-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}