/* ==========================================================================
   Tokens — every colour, font, size, radius and space on the public site.
   --------------------------------------------------------------------------
   Direction: MODERN BENTO (chosen from three concepts). A light warm-grey
   page; content lives in rounded cards of different sizes arranged on a
   grid — big photo cards, white cards, one lemon card, one navy card.
   Real photography, pill buttons, quiet type. No glows, glass, gradients
   (except the plain shade that keeps text readable on a photo), no
   floating decoration, no motion for its own sake.

   Brand colours (ALAMEEN branding file):
     Dark Navy #20394A · Spark Lemon #E4FF2B · Royal (sky) Blue #7FBDD1
     Almost White #F7F3EB · Near Grey #949597
   Roles:
     navy   text, the navy card, footer
     lemon  "Request a quote" + one highlight card per screen (navy text on it)
     sky    small accents (tags, numbers, icons) — never body text on paper
   ========================================================================== */

:root {
    /* ── Colour ──────────────────────────────────────────────────────────── */
    --navy:       #20394A;
    --navy-deep:  #172B38;
    --lemon:      #E4FF2B;
    --lemon-deep: #D4EF1C;
    --sky:        #7FBDD1;
    --sky-soft:   #DCEBEF;
    --paper:      #F7F3EB;
    --page:       #EEEDE8;                 /* the page behind the cards */
    --card:       #FFFFFF;
    --card-soft:  #F5F4F0;                 /* image wells, inner panels */
    --whatsapp:   #25D366;

    --ink:        var(--navy);
    --ink-soft:   #4A5D69;                 /* 6.6:1 on white */
    --ink-faint:  #6B7B85;                 /* 4.6:1 on white */
    --teal:       #2A6A80;                 /* sky as text, 5.9:1 on white */
    --on-dark:      #FFFFFF;
    --on-dark-soft: #C7D1D6;               /* 8:1 on navy */

    --line:       #E3E1DA;
    --line-dark:  rgb(255 255 255 / 0.16);

    /* Plain shade under text on photos (bottom-up) */
    --photo-shade: linear-gradient(to top, rgb(16 30 40 / 0.86), rgb(16 30 40 / 0.12) 62%);

    /* ── Type ────────────────────────────────────────────────────────────── */
    /* IBM Plex Sans Arabic for Arabic + all body text; Archivo (expanded) for
       Latin headings and numbers (stand-in for the guide's Movatif). */
    --font-head: "Archivo", "IBM Plex Sans Arabic", system-ui, sans-serif;
    --font-body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-num:  "Archivo", system-ui, sans-serif;

    --fs-xs:   0.8125rem;
    --fs-sm:   0.9375rem;
    --fs-base: 1rem;
    --fs-md:   clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --fs-lg:   clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
    --fs-xl:   clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    --fs-2xl:  clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
    --fs-num:  clamp(3rem, 2.2rem + 3.4vw, 5.25rem);
    --lh-head: 1.18;
    --lh-body: 1.75;

    /* ── Space & layout ──────────────────────────────────────────────────── */
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
    --s-6: 2rem;    --s-7: 3rem;   --s-8: 4rem;    --s-9: 5rem;
    --gap: 12px;                                   /* between bento cards */
    --section: clamp(3.5rem, 2.4rem + 3.5vw, 6rem);
    --container: 1320px;
    --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
    --header-h: 84px;
    --header-h-mobile: 68px;
    --actionbar-h: 76px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* ── Shape ───────────────────────────────────────────────────────────── */
    --r-xl: 28px;    /* big cards */
    --r-lg: 22px;    /* cards */
    --r-md: 16px;    /* images inside cards, inputs */
    --r-sm: 10px;
    --r-pill: 999px;

    /* ── Motion — functional only ────────────────────────────────────────── */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --t-fast: 150ms;
    --t: 260ms;

    /* ── Layers ──────────────────────────────────────────────────────────── */
    --z-header: 100; --z-actionbar: 110; --z-float: 120; --z-menu: 200;
}

@media (prefers-reduced-motion: reduce) {
    :root { --t-fast: 0ms; --t: 0ms; }
}