/* =============================================================
   ICC — Design Tokens
   Extracted from the source Figma PDF exports (12 frames, 1440px
   reference width). Values are measured directly from the PDF
   vector geometry (page.get_drawings()) and pixel-sampled from
   the rendered PDF where vector data was unavailable.
   ============================================================= */

:root {
  /* ---- Brand color palette -------------------------------- */
  --color-navy: #426097;         /* primary brand navy: header, hero, cards, footer */
  --color-navy-600: #3a5586;     /* derived hover/darker navy (not directly sampled) */
  --color-gold: #FFC400;         /* accent / primary CTA button */
  --color-bg-page: #F4F4F4;      /* light section background */
  --color-bg-white: #FFFFFF;     /* white section background / cards */
  --color-accent-tint: #E4EEFF;  /* light blue tint: badges, icon-circle bg, heading-on-navy text, outline btn */
  --color-text-body: #646464;    /* paragraph / body copy on light bg */
  --color-text-muted: #BDBDBD;   /* dividers, placeholder text, secondary icons */
  --color-text-heading: #426097; /* section headings on light bg (= navy) */
  --color-footer-strip: #657DA9; /* footer bottom copyright strip bg */
  --color-white: #FFFFFF;
  --color-divider: #BDBDBD;

  /* ---- Typography -------------------------------------------
     UNRESOLVED: The source PDF embeds Arabic text as a Type3
     vector font (no real font program is embedded, so the exact
     Figma font family/name cannot be extracted programmatically).
     Visual comparison of glyph shapes (geometric, closed loops,
     bold rounded terminals) closely matches Google's "Cairo"
     family, which is used here as the closest available
     substitute. Swap --font-primary below if the real family is
     later identified. */
  --font-primary: "Cairo", "Tajawal", "Segoe UI", Tahoma, sans-serif;

  --fs-h1: 48px;        /* hero heading */
  --fs-h2: 40px;        /* section heading (large) */
  --fs-h2-sub: 30px;     /* section heading (medium / "لماذا تختار") */
  --fs-h3: 25px;
  --fs-body-lg: 25px;
  --fs-body: 20px;
  --fs-body-sm: 18px;
  --fs-nav: 20px;
  --fs-eyebrow: 20px;
  --fs-stat: 80px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---- Layout -------------------------------------------- */
  --page-width: 1440px;
  --container-width: 1320px;   /* 1440 - 60*2 side padding */
  --container-pad: 60px;
  --header-height: 86px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}