/* ============================================================
   Amjad Al Taameer — Design Tokens v1.0 FINAL (2026-11-14)
   Palette sampled from the actual company logo extracted from the
   company profile (see design-system.md §1-final / §8 record and
   output/logo/README.md). The earlier provisional candidate
   PF-PAL-0006 is superseded.
   Fonts unchanged: PF-PAIR-001 (IBM Plex Sans Arabic / Tajawal /
   Manrope), all SIL OFL 1.1 VERIFIED per font_license_verification_v2.
   Premium polish (2026-11-14): intermediate type tokens added for
   sizes the build actually uses (brand, H4/card titles, numbered
   chips, icons, micro labels) so style.css carries ZERO hardcoded
   font-sizes — every value below is taken from, or sits exactly on,
   the design-system §2.3 type scale. Display/H2 clamp maxima raised
   (reference-calibrated against the approved build reference for a
   premium-large feel); minima still equal the scale's mobile sizes
   and the scale's desktop sizes sit inside the clamp range.
   ============================================================ */
:root {
  /* Color — brand (FINAL, from the logo) */
  --color-ink: #151636;        /* darkest navy — body text, dark surfaces */
  --color-primary: #1B1B42;    /* deep navy — primary buttons, dark header */
  --color-royal: #2C2F74;      /* royal blue — text links, secondary surfaces */
  --color-accent: #2A84BE;     /* azure — icons, large highlights (not small text) */
  --color-gold: #CA9331;       /* gold — premium accents, stats, dividers */
  --color-charcoal: #474547;   /* charcoal — alternative dark neutral */
  --color-surface-alt: #EEF5FA; /* derived tint: 8% azure over white */
  --gradient-brand: linear-gradient(135deg, #1B1B42, #2C2F74 55%, #2A84BE);

  /* Color — neutral / functional (web standard, not brand) */
  --color-surface: #FFFFFF;
  --color-border: rgba(21, 22, 54, 0.12);
  --color-success: #1E7A46;
  --color-whatsapp: #25D366;   /* WhatsApp brand green — functional, floating WhatsApp button only */
  --color-warning: #B7791F;
  --color-error: #B3261E;

  /* Typography — PF-PAIR-001 stacks (design-system §2.4: Latin terms and
     digits fall through to Manrope automatically inside each stack).
     Numeric variant: Manrope FIRST so Western digits/phone numbers
     actually render in Manrope (IBM Plex Sans Arabic ships its own
     Latin digits, so stack order alone would never reach Manrope);
     Arabic glyphs fall back to IBM Plex Sans Arabic. */
  --font-heading: "IBM Plex Sans Arabic", "Manrope", sans-serif;
  --font-body: "Tajawal", "Manrope", sans-serif;
  --font-numeric: "Manrope", "IBM Plex Sans Arabic", sans-serif;

  /* Type scale — design-system §2.3 (desktop / mobile, via clamp) */
  --fs-display: clamp(36px, 5.5vw, 64px); /* scale 56/36 — max raised, reference-calibrated */
  --fs-h2: clamp(30px, 3.8vw, 44px);      /* scale 40/30 — max raised, reference-calibrated */
  --fs-h3: clamp(24px, 2.6vw, 28px);      /* scale 28/24 */
  --fs-h4: 20px;                          /* card/footer titles — scale Lead desktop size, heading role */
  --fs-brand: 20px;                       /* header brand name — between Body and Lead on the scale */
  --fs-brand-sm: 17px;                    /* header brand name, small screens — scale Body desktop size */
  --fs-lead: clamp(18px, 2vw, 20px);      /* scale 20/18 */
  --fs-body: clamp(16px, 1.4vw, 17px);    /* scale 17/16 */
  --fs-caption: 14px;                     /* scale 14/14 */
  --fs-micro: 12px;                       /* brand sub-line / micro labels — half-step under Caption (web standard) */
  --fs-num: 28px;                         /* numbered chips — scale H3 desktop size */
  --fs-num-lg: 34px;                      /* step numbers — scale Stat mobile size */
  --fs-ico: 26px;                         /* value icons — between Body and H3 on the scale */
  --fs-stat: clamp(34px, 4vw, 44px);      /* scale 44/34 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  /* Loaded-weight reality (Google Fonts): IBM Plex Sans Arabic 400–700,
     Tajawal 400/500/700/800, Manrope 400/600/700/800.
     Tajawal has NO 600 — semibold emphasis set in the BODY font must use
     700 (this token); --fw-semibold (600) is for heading-font elements
     (IBM Plex Sans Arabic / Manrope both ship a true 600). */
  --fw-body-semibold: 700;

  --lh-heading: 1.25;  /* scale H2 1.25 / Display 1.2 */
  --lh-h3: 1.3;        /* scale H3 1.3 */
  --lh-lead: 1.5;      /* scale Lead 1.5 */
  --lh-body: 1.6;      /* scale Body 1.6 */
  --lh-caption: 1.5;   /* scale Caption 1.5 */
  --lh-stat: 1.1;      /* scale Stat 1.1 */

  /* Spacing (8pt) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  --container-max: 1280px;
  --section-pad-y: 96px;

  /* Radius & shadow */
  --radius-card: 16px;
  --radius-button: 12px;
  --radius-input: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 30px rgba(21, 22, 54, 0.10);
  --shadow-card-hover: 0 14px 40px rgba(21, 22, 54, 0.14); /* same ink tint as --shadow-card, one step deeper for hover lift */
}

/* Arabic line-height relief (web standard for Arabic script; scale §2.3 Arabic values) */
:root:lang(ar) {
  --lh-heading: 1.35;
  --lh-h3: 1.4;
  --lh-lead: 1.7;
  --lh-body: 1.85;
  --lh-caption: 1.7;
}

@media (max-width: 1023px) {
  :root {
    --section-pad-y: 64px;
  }
}