/* ==========================================================================
   ZADEMI DESIGN TOKENS
   Phase 2 — extracted from the approved homepage's hand-authored values.
   Every reusable value the homepage already uses (colors, radii, shadows,
   spacing, type sizes) is named here once. Components below consume these
   variables instead of repeating rgba()/px literals.
   ========================================================================== */

:root {
  /* ---- Brand colors (unchanged from brand guidelines) ---- */
  --color-navy-deep: #061e43;
  --color-navy: #0b2d5b;
  --color-turquoise: #00b3a4;
  --color-mint: #2ed47a;
  --color-ice: #e7f8f3;      /* mint tint, used for icon chips / pills */
  --color-mist: #f4f8f8;     /* section backgrounds */
  --color-paper: #ffffff;
  --color-line: #dce7e8;     /* hairlines / borders */
  --color-charcoal: #1f2937;

  /* Ink scale — consolidates the ad-hoc rgb() greys found across the CSS */
  --ink-900: var(--color-navy-deep);
  --ink-700: #36506f;   /* nav links */
  --ink-600: #52647c;   /* hero lede */
  --ink-500: #61738a;   /* section paragraphs (was --muted-ink) */
  --ink-400: #808fa2;   /* card meta / footer text */
  --ink-300: #a2b0bd;   /* card index numbers */

  /* Elevation shadows — replaces one-off box-shadow rgba() values */
  --shadow-xs: 0 8px 20px rgba(11, 45, 91, 0.08);
  --shadow-sm: 0 12px 30px rgba(11, 45, 91, 0.18);   /* buttons */
  --shadow-md: 0 18px 50px rgba(11, 45, 91, 0.06);   /* cards */
  --shadow-lg: 0 28px 60px rgba(11, 45, 91, 0.1);    /* card hover */
  --shadow-xl: 0 32px 80px rgba(11, 45, 91, 0.13);   /* return-logo, wallet */
  --shadow-2xl: 0 42px 95px rgba(6, 30, 67, 0.16);   /* wallet card */
  --shadow-cta: 0 30px 85px rgba(6, 30, 67, 0.22);   /* final CTA block */

  /* ---- Radius scale ---- */
  --radius-xs: 0.5rem;    /* 8px  — skip link, small chips */
  --radius-sm: 0.875rem;  /* 14px — icon tiles */
  --radius-md: 1rem;      /* 16px — inputs, tags */
  --radius-lg: 1.625rem;  /* 26px — industry / journey cards */
  --radius-xl: 1.875rem;  /* 30px — loyalty pass, wallet window */
  --radius-2xl: 2.375rem; /* 38px — final CTA block */
  --radius-pill: 999px;   /* buttons */

  /* ---- Spacing scale (4px base, matches existing --spacing: .25rem) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Section / card rhythm — the two spacing tokens Phase 1 hardcoded per-section */
  --space-section: clamp(4rem, 6vw, 5.5rem);   /* .section-shell padding-block */
  --space-section-tight: 3.5rem;                /* ≤820px section-shell override */
  --space-card-gap: 1rem;                       /* gap between grid cards */
  --space-card-pad-sm: 1.25rem;                 /* industry-card padding */
  --space-card-pad-lg: 1.5rem;                  /* journey-card padding */

  /* ---- Container / layout ---- */
  --container-max: 1240px;
  --container-gutter: 3rem;      /* desktop side gutter */
  --container-gutter-md: 2rem;   /* ≤820px */
  --container-gutter-sm: 1.25rem;/* ≤390px */

  /* ---- Breakpoints (documented tokens; consumed via literal @media values,
     mirrored here so every screen a component needs to reason about is named) ---- */
  --bp-nav-collapse: 1080px;
  --bp-tablet: 820px;
  --bp-mobile: 620px;
  --bp-mobile-sm: 390px;

  /* ---- Button sizing ---- */
  --btn-height-lg: 56px;   /* hero primary/secondary actions */
  --btn-height-md: 48px;   /* header CTA, final CTA */
  --btn-height-sm: 42px;   /* header CTA on tablet */
  --btn-pad-lg: 1.55rem;
  --btn-pad-md: 1.35rem;
  --btn-pad-sm: 1rem;

  /* =========================================================
     TYPOGRAPHY — ENGLISH (Latin)
     Primary/display: Nunito (bold, rounded, friendly — matches brand PDF)
     Secondary/body:   Inter (clear, versatile, reliable)
     ========================================================= */
  --font-display: "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Inter", "Avenir Next", "Segoe UI", Arial, sans-serif;

  --fs-hero: clamp(3.25rem, 4.75vw, 5.1rem);
  --lh-hero: 0.96;
  --fs-h2: clamp(2.5rem, 3.6vw, 3.65rem);        /* how-it-works heading */
  --fs-h2-sm: clamp(2.35rem, 3.25vw, 3.35rem);   /* business/return/final-cta heading */
  --lh-h2: 1.03;
  --fs-h3: 1.55rem;   /* journey card title */
  --fs-h4: 1.38rem;   /* industry card title */
  --fs-body-lg: clamp(1.05rem, 1.5vw, 1.22rem);  /* hero lede */
  --fs-body: 1.02rem;                             /* section paragraph */
  --fs-body-sm: 0.92rem;                           /* card paragraph */
  --fs-label: 0.84rem;                             /* assurances, meta */
  --fs-micro: 0.68rem;                             /* eyebrow, tags */
  --lh-body: 1.66;
  --lh-body-loose: 1.75;

  /* =========================================================
     TYPOGRAPHY — ARABIC
     Display: Cairo — a modern geometric Arabic face with the same rounded,
       confident weight range as Nunito (700–900 available), reads friendly
       at large display sizes without Nunito's Latin-only glyph set.
     Body:    IBM Plex Sans Arabic — clear, neutral, wide weight range;
       complements Inter's technical clarity for long-form paragraphs.
     Arabic sizes/line-heights are tuned independently: bold Arabic display
     faces read visually heavier than Latin at the same pt size, and
     unconnected ascenders/descenders mean body copy needs more line-height
     to stay comfortable, so sizes step down ~8–12% and line-heights step
     up ~15–20% versus the English tokens above.
     ========================================================= */
  --font-display-ar: "Cairo", "Tahoma", sans-serif;
  --font-body-ar: "IBM Plex Sans Arabic", "Tahoma", sans-serif;

  --fs-hero-ar: clamp(2.75rem, 4.4vw, 4.4rem);
  --lh-hero-ar: 1.22;
  --fs-h2-ar: clamp(2.2rem, 3.3vw, 3.3rem);
  --fs-h2-sm-ar: clamp(2.1rem, 3vw, 3.05rem);
  --lh-h2-ar: 1.3;
  --fs-h3-ar: 1.45rem;
  --fs-h4-ar: 1.3rem;
  --fs-body-lg-ar: clamp(1.05rem, 1.5vw, 1.2rem);
  --fs-body-ar: 1.05rem;
  --fs-body-sm-ar: 0.95rem;
  --lh-body-ar: 1.9;
  --lh-body-loose-ar: 2;
}

/* Arabic mode: swap the active font/type tokens rather than duplicating
   every component rule. Applied via <html lang="ar" dir="rtl">. */
html[lang="ar"] {
  --font-display: var(--font-display-ar);
  --font-body: var(--font-body-ar);
  --fs-hero: var(--fs-hero-ar);
  --lh-hero: var(--lh-hero-ar);
  --fs-h2: var(--fs-h2-ar);
  --fs-h2-sm: var(--fs-h2-sm-ar);
  --lh-h2: var(--lh-h2-ar);
  --fs-h3: var(--fs-h3-ar);
  --fs-h4: var(--fs-h4-ar);
  --fs-body-lg: var(--fs-body-lg-ar);
  --fs-body: var(--fs-body-ar);
  --fs-body-sm: var(--fs-body-sm-ar);
  --lh-body: var(--lh-body-ar);
  --lh-body-loose: var(--lh-body-loose-ar);
}

@media (max-width: 820px) {
  :root { --container-gutter: var(--container-gutter-md); }
}
@media (max-width: 390px) {
  :root { --container-gutter: var(--container-gutter-sm); }
}