/* ==========================================================================
   WADI MATROUH — DESIGN TOKENS
   Single source of truth for colour, type scale, spacing, radius, shadow.
   Values derive from the approved brand kit. Do not hard-code hex anywhere else.
   ========================================================================== */

:root {

  /* ---- BRAND COLOUR — from the approved brand kit ---- */
  --wadi-olive:        #0E4B2E;   /* أخضر الزيتون العميق — primary */
  --wadi-gold:         #D4AF37;   /* ذهبي فاخر — accent, used sparingly */
  --wadi-cream:        #F8EED9;   /* كريمي دافئ — section backgrounds */
  --wadi-amber:        #D68000;   /* عنبر العسل — honey category, highlights */
  --wadi-leaf:         #7CA34A;   /* أخضر الأوراق — support, success */

  /* ---- DERIVED TINTS / SHADES ---- */
  --wadi-olive-900:    #06301C;
  --wadi-olive-700:    #0E4B2E;
  --wadi-olive-500:    #1C6B44;
  --wadi-olive-600:    #0A3A23;   /* pressed/hover on a filled green button */
  --wadi-olive-100:    #E4EFE8;
  --wadi-cream-50:     #FBF7EF;
  --wadi-cream-200:    #F1E3C6;

  /* ---- NEUTRALS ----
     Rebalanced 2026-09-22. The old scale was warm/beige-leaning (#1A1A17 ink on
     #E6E2D8 borders), which read muddy next to white product photography and
     pushed everything toward "earthy" rather than premium retail. These are
     very slightly cool and neutral, so the brand green and gold read as
     deliberate accents instead of competing with warm greys. */
  --wadi-ink:          #1A1D1B;   /* primary text */
  --wadi-ink-soft:     #5C6661;   /* secondary text */
  /* Darkened 2026-09-22 after an independent contrast audit. #8A948E measured
     3.13:1 on white, 2.93:1 on cream, 2.72:1 on #F8EED9 — below the 4.5:1 body
     floor in EVERY context it was used: struck prices, category links, English
     product names, PDP meta and inactive tabs. One token, 40+ instances. */
  --wadi-ink-muted:    #6B7570;   /* meta, captions — ~4.6:1 on cream */
  --wadi-line:         #E4E6E4;   /* borders, dividers */
  --wadi-line-soft:    #EFF1EF;   /* inner rules inside a card */
  --wadi-surface:      #FFFFFF;   /* product surfaces — products need white */
  --wadi-surface-alt:  var(--wadi-cream-50);

  /* ---- ROLE TOKENS ----
     The rule the design now follows: GREEN IS AN ACCENT, NOT THE TEXT COLOUR.
     Headings, product names and prices are neutral; green is reserved for the
     brand mark, primary CTAs, active navigation and category chrome. Changing
     these three lines re-points every heading and price on the site. */
  --wadi-heading:      var(--wadi-ink);
  --wadi-price:        var(--wadi-ink);
  --wadi-accent:       var(--wadi-olive);

  /* ---- SEMANTIC ---- */
  --wadi-success:      var(--wadi-leaf);
  --wadi-warning:      var(--wadi-amber);
  --wadi-danger:       #B3261E;
  --wadi-sale:         #C62828;   /* discount badge + error states ONLY */

  /* ---- CATEGORY ACCENTS ---- */
  --wadi-cat-olv:      var(--wadi-olive);
  --wadi-cat-pan:      var(--wadi-leaf);
  --wadi-cat-hny:      var(--wadi-amber);

  /* ==========================================================================
     TYPOGRAPHY  — two self-hosted Arabic variable families
     Arabic is the primary script. Latin is secondary.

     El Messiri  — display / headings. Calligraphic Naskh character, reads as
                   heritage and craft rather than as a generic web sans.
     Cairo       — body / UI / numerals. Neutral, highly legible at small
                   sizes, full Arabic + Latin coverage for prices and SKUs.

     Both are SIL OFL and self-hosted from assets/fonts/ as VARIABLE fonts:
     one file per script covers the whole weight range, so adding a weight
     costs zero extra bytes. Total cost of the entire type system: ~108 KB.

     SWAP POINT: if a licensed brand font is later purchased, replace the
     @font-face blocks in 02-typography-rtl.css and repoint these two tokens.
     Nothing else in the system needs to change.
     ========================================================================== */

  --wadi-font-ar:         "Cairo", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --wadi-font-ar-display: "El Messiri", "Cairo", "Noto Kufi Arabic", Georgia, serif;
  --wadi-font-latin:      "Cairo", "Segoe UI", Arial, sans-serif;  /* numerals, prices, SKUs */
  --wadi-font-lockup:     "El Messiri", Georgia, serif;            /* Latin brand lockup only */
  --wadi-font-ui:         var(--wadi-font-ar);

  /* Fluid type scale — 1.200 minor third, Arabic-friendly (avoids tiny body text) */
  --wadi-fs-xs:   clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --wadi-fs-sm:   clamp(0.88rem, 0.85rem + 0.14vw, 0.95rem);
  --wadi-fs-base: clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --wadi-fs-md:   clamp(1.15rem, 1.09rem + 0.28vw, 1.32rem);
  --wadi-fs-lg:   clamp(1.35rem, 1.25rem + 0.45vw, 1.65rem);
  --wadi-fs-xl:   clamp(1.60rem, 1.42rem + 0.80vw, 2.10rem);
  --wadi-fs-2xl:  clamp(1.95rem, 1.65rem + 1.30vw, 2.80rem);
  --wadi-fs-3xl:  clamp(2.30rem, 1.85rem + 2.00vw, 3.60rem);

  /* Arabic needs more leading than Latin — diacritics and ascenders */
  --wadi-lh-tight:  1.35;
  --wadi-lh-snug:   1.55;
  --wadi-lh-body:   1.85;   /* Arabic body — deliberately generous */
  --wadi-lh-loose:  2.00;

  --wadi-fw-regular: 400;
  --wadi-fw-medium:  500;
  --wadi-fw-semi:    600;
  --wadi-fw-bold:    700;

  /* Arabic renders tighter than Latin at the same size — no negative tracking */
  --wadi-ls-normal:  0;
  --wadi-ls-wide:    0.02em;   /* Latin small-caps / eyebrow only */

  /* ==========================================================================
     SPACING — 4px base, geometric
     ========================================================================== */
  --wadi-sp-1:   0.25rem;   /*  4 */
  --wadi-sp-2:   0.50rem;   /*  8 */
  --wadi-sp-3:   0.75rem;   /* 12 */
  --wadi-sp-4:   1.00rem;   /* 16 */
  --wadi-sp-5:   1.50rem;   /* 24 */
  --wadi-sp-6:   2.00rem;   /* 32 */
  --wadi-sp-7:   3.00rem;   /* 48 */
  --wadi-sp-8:   4.00rem;   /* 64 */
  --wadi-sp-9:   6.00rem;   /* 96 */

  /* Section rhythm — "calm premium" depends on generous vertical space */
  --wadi-section-y:        clamp(3rem, 6vw, 6rem);
  --wadi-section-y-tight:  clamp(2rem, 4vw, 3.5rem);

  /* ---- LAYOUT ---- */
  --wadi-container:      1200px;
  --wadi-container-wide: 1440px;
  --wadi-container-text:  760px;   /* readable measure for Arabic prose */
  --wadi-gutter:         clamp(1rem, 4vw, 2rem);   /* 16px min side gutter on phones */

  /* ---- RADIUS ---- */
  --wadi-r-sm:  4px;
  --wadi-r-md:  8px;
  --wadi-r-lg:  14px;
  --wadi-r-xl:  22px;
  --wadi-r-pill: 999px;

  /* ---- ELEVATION — restrained; premium reads as flat, not floaty ---- */
  --wadi-shadow-sm: 0 1px 2px rgba(14,75,46,.06);
  --wadi-shadow-md: 0 4px 16px rgba(14,75,46,.08);
  --wadi-shadow-lg: 0 12px 32px rgba(14,75,46,.10);

  /* ---- MOTION ---- */
  --wadi-ease:      cubic-bezier(.22,.61,.36,1);
  --wadi-dur-fast:  140ms;
  --wadi-dur:       220ms;

  /* ---- TOUCH ---- */
  --wadi-tap-min: 44px;   /* minimum tap target */

  /* Height of the fixed mobile bottom nav, border included, safe area NOT.
     Anything that sits above the nav or clears it must read this token.
     It used to be an emergent number — the nav had no declared height, so its
     real 65px came out of its content — and three separate files had each
     guessed 58px. The body cleared it 7px short and the sticky purchase bar
     sat 7px inside it. The nav now takes its height FROM this token, so the
     number is declared in one place and cannot drift again. */
  --wadi-mobilenav-h: 65px;

  --wadi-z-header: 100;
  --wadi-z-drawer: 200;
  --wadi-z-modal:  300;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root { --wadi-dur: 0ms; --wadi-dur-fast: 0ms; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}