/* =============================================================================
 * Zawad design tokens
 *
 * Single source of truth for colour, type, spacing and radius.
 * Rule: no other CSS file may contain a raw hex value, px font-size or px
 * spacing value. If you need a new value, add a token here first.
 *
 * Palette rationale (from the logo brief, Pinterest board audit 2026-08-30):
 * warm sand / cream base, terracotta and deep olive as the two brand poles,
 * gold as the accent. Deliberately NO blue/purple tech gradients and no
 * religious-iconography colour coding.
 * ========================================================================== */

:root {
	/* --- Brand — Palette A "Classic Zawad" -------------------------------
	 * Adopted 2026-09-01, replacing the warm terracotta/olive system.
	 * Chosen because it matched mockup V1 most closely on CIEDE2000
	 * (mean dE 4.6 vs 6.2 for Palette B and 8.0 for C), and because the
	 * V1.1 logo ships in exactly #142333 so mark and UI agree.
	 * ------------------------------------------------------------------ */
	--zw-navy:            #142333;  /* Midnight Navy — dark sections        */
	--zw-navy-deep:       #0C1927;  /* borrowed from Palette B for the      */
	                                /* deepest surfaces; the V1 mockup's    */
	                                /* navy measured darker than A alone.   */
	--zw-navy-soft:       #D6DAE1;  /* tint, for text on navy               */

	--zw-gold:            #B68A3A;  /* Antique Gold — fills, text on navy   */
	--zw-gold-ink:        #806129;  /* darkened for text on light. Must pass */
	                                /* on the SAND band too, not just ivory */
	                                /* — 4.53:1 sand, 5.20:1 ivory.         */
	--zw-gold-soft:       #F0E4C8;

	/* --- Neutrals ----------------------------------------------------------
	 * --zw-sand was a warm tan (#EFE7D8) until 2026-09-02. Checked against
	 * Intrepid Travel, Airbnb, Ritz-Carlton and Sotheby's International
	 * Realty: all four run pure white with a COOL neutral grey for secondary
	 * sections, never a warm/brown tint. Switched to match — the tan was
	 * reading as generic "AI template" rather than premium.
	 * ------------------------------------------------------------------ */
	--zw-ivory:           #FFFFFF;  /* was warm cream #F6F0E5 until          */
	                                 /* 2026-09-02 — same "pure white base"  */
	                                 /* fix as --zw-sand, same evidence.     */
	--zw-sand:            #F4F4F4;  /* cool neutral — alternate section band */
	--zw-sand-dark:       #E8E8E8;
	--zw-ink:             #20262C;  /* Charcoal — body text                */
	--zw-ink-soft:        #4A5158;
	--zw-muted:           #69655F;  /* Warm Grey, darkened from Palette A's */
	                                /* #77736C which only reached 4.16:1 on */
	                                /* ivory and 3.84:1 on the sand band.   */
	                                /* This clears AA on both (5.10 / 4.71) */
	                                /* contrast only improved when the      */
	                                /* backgrounds got lighter (white/grey).*/
	--zw-line:            #E5E5E5;  /* was warm tan #E0D8C8 — same fix, a   */
	                                /* tan hairline looked dirty on white.  */
	--zw-white:           #FFFFFF;

	/* --- Legacy aliases (old warm names -> new navy system) --------------
	 * Kept so no rule silently loses its colour during the re-skin. Remove
	 * once nothing references them.
	 * ------------------------------------------------------------------ */
	--zw-cream:           var(--zw-ivory);
	--zw-olive:           var(--zw-navy);
	--zw-olive-dark:      var(--zw-navy-deep);
	--zw-olive-soft:      var(--zw-navy-soft);
	--zw-terracotta:      var(--zw-gold);
	--zw-terracotta-dark: #9C7530;
	--zw-terracotta-soft: var(--zw-gold-soft);

	/* --- Semantic -------------------------------------------------------- */
	--zw-bg:              var(--zw-ivory);
	--zw-bg-alt:          var(--zw-sand);
	--zw-surface:         var(--zw-white);
	--zw-text:            var(--zw-ink);
	--zw-text-muted:      var(--zw-muted);
	--zw-border:          var(--zw-line);

	--zw-primary:         var(--zw-gold);
	--zw-primary-hover:   #9C7530;
	--zw-on-primary:      var(--zw-navy);

	--zw-secondary:       var(--zw-navy);
	--zw-secondary-hover: var(--zw-navy-deep);
	--zw-on-secondary:    var(--zw-ivory);

	--zw-accent:          var(--zw-gold);

	--zw-success:         #2F7A4F;
	--zw-warning:         #B7791F;
	--zw-danger:          #B3261E;

	/* WhatsApp is a primary conversion channel in this market. */
	--zw-whatsapp:        #25D366;

	/* --- Typography ------------------------------------------------------ */
	--zw-font-heading: "Zawad Display", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--zw-font-body:    "Zawad Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--zw-font-arabic:  "Noto Naskh Arabic", "Geeza Pro", serif;
	--zw-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Fluid type scale, 1.250 ratio, clamped for mobile -> desktop. */
	--zw-text-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
	--zw-text-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	--zw-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--zw-text-lg:   clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
	--zw-text-xl:   clamp(1.375rem, 1.29rem + 0.42vw, 1.625rem);
	--zw-text-2xl:  clamp(1.625rem, 1.47rem + 0.78vw, 2.125rem);
	--zw-text-3xl:  clamp(2rem, 1.72rem + 1.40vw, 2.875rem);
	--zw-text-4xl:  clamp(2.375rem, 1.90rem + 2.38vw, 3.875rem);

	--zw-leading-tight: 1.15;
	--zw-leading-snug:  1.35;
	--zw-leading-body:  1.65;

	--zw-weight-normal: 400;
	--zw-weight-medium: 500;
	--zw-weight-bold:   700;

	--zw-tracking-wide: 0.06em;
	--zw-tracking-logo: 0.18em;

	/* --- Spacing (4px base) ---------------------------------------------- */
	--zw-space-1:  0.25rem;
	--zw-space-2:  0.5rem;
	--zw-space-3:  0.75rem;
	--zw-space-4:  1rem;
	--zw-space-5:  1.5rem;
	--zw-space-6:  2rem;
	--zw-space-7:  3rem;
	--zw-space-8:  4rem;
	--zw-space-9:  6rem;
	--zw-space-10: 8rem;

	--zw-section-y: clamp(3rem, 2rem + 5vw, 6rem);

	/* --- Layout ---------------------------------------------------------- */
	/* Was 1200px until 2026-09-02 — the floating header (added the same day)
	 * uses --zw-container-wide (1400px), so every section's content was
	 * rendering 200px narrower than the header above it, leaving a visibly
	 * wider gutter on the content than on the nav. Benchmarked against
	 * Airbnb, which declares a 1440px content max-width — unified to the
	 * same 1400px both tokens already agreed on, rather than picking a
	 * third number. */
	--zw-container:      1400px;
	--zw-container-wide: 1400px;
	--zw-container-text: 68ch;
	--zw-gutter:         clamp(1rem, 0.5rem + 2.5vw, 2rem);

	/* --- Radius / elevation ---------------------------------------------- */
	--zw-radius-sm:   4px;
	--zw-radius:      10px;
	--zw-radius-lg:   18px;
	--zw-radius-xl:   22px;
	--zw-radius-pill: 999px;

	--zw-shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.06);
	--zw-shadow:    0 4px 16px rgba(28, 26, 23, 0.08);
	--zw-shadow-lg: 0 16px 40px rgba(28, 26, 23, 0.12);

	/* --- Motion ---------------------------------------------------------- */
	--zw-ease:  cubic-bezier(0.2, 0.6, 0.2, 1);
	--zw-fast:  140ms;
	--zw-base:  240ms;
	--zw-slow:  500ms;

	/* --- Z-index scale --------------------------------------------------- */
	--zw-z-sticky: 100;
	--zw-z-header: 200;
	--zw-z-float:  300;
	--zw-z-modal:  400;
}

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