/**
 * ZWealthFlow Design Tokens
 * MASTER SOURCE for colors, type, spacing, radius, motion and layout.
 * Elementor Site Settings mirror these values (presentation layer only).
 * If a token changes here, update the Elementor Kit mapping too (see Stage 1 report, section 22).
 */

/* Manrope variable (200-800), self-hosted, SIL Open Font License (assets/fonts/OFL.txt) */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans Arabic (400/500/600/700), self-hosted, SIL Open Font License (assets/fonts/OFL-IBM-Plex-Sans-Arabic.txt).
 * Arabic unicode-range only: Latin text (brand, acronyms, digits) keeps rendering in Manrope,
 * and browsers download a weight only when Arabic glyphs actually appear. */
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-500.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 700 800;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-700.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

:root {
	/* ---------- Backgrounds ---------- */
	--zwf-bg-primary: #08111F;
	--zwf-bg-secondary: #0D192A;
	--zwf-bg-elevated: #122238;
	--zwf-bg-overlay: #172A44;
	--zwf-bg-header: rgba(8, 17, 31, 0.86);

	/* ---------- Brand ---------- */
	--zwf-primary: #18C98B;
	--zwf-primary-hover: #14AE79;
	--zwf-primary-active: #109468;
	--zwf-primary-soft: rgba(24, 201, 139, 0.12);
	--zwf-primary-soft-strong: rgba(24, 201, 139, 0.22);
	--zwf-on-primary: #04140E;
	--zwf-primary-text: #5FE0B2;      /* emerald text on soft emerald grounds */

	--zwf-gold: #D9AD55;
	--zwf-gold-soft: rgba(217, 173, 85, 0.12);
	--zwf-gold-border: rgba(217, 173, 85, 0.45);
	--zwf-gold-text: #EBC77A;         /* gold text on soft gold grounds (AA) */
	--zwf-gold-text-strong: #F6DDA6;  /* hover */

	/* ---------- Placeholder art grounds (thumbnails, covers, hero art) ---------- */
	--zwf-art-1: #10243A;
	--zwf-art-2: #0B1A2C;
	--zwf-art-3: #0F2033;
	--zwf-art-4: #13283F;

	/* ---------- Text ---------- */
	--zwf-text-primary: #F4F7FA;
	--zwf-text-secondary: #A9B6C8;
	--zwf-text-muted: #748399; /* AA only on --zwf-bg-primary; use for non-essential text */

	/* ---------- Status ---------- */
	--zwf-success: var(--zwf-primary);
	--zwf-success-soft: var(--zwf-primary-soft);
	--zwf-warning: #F2B544;
	--zwf-warning-soft: rgba(242, 181, 68, 0.12);
	--zwf-error: #F26D6D;
	--zwf-error-soft: rgba(242, 109, 109, 0.12);

	/* ---------- Lines ---------- */
	--zwf-border: rgba(255, 255, 255, 0.08);
	--zwf-border-strong: rgba(255, 255, 255, 0.16);
	--zwf-border-input: rgba(255, 255, 255, 0.18);

	/* ---------- Focus ---------- */
	--zwf-focus-ring: 0 0 0 2px var(--zwf-bg-primary), 0 0 0 4px var(--zwf-primary);

	/* ---------- Typography ---------- */
	/* Language-aware families. Components only ever use --zwf-font-sans,
	 * which switches with the document language (see html[lang^="ar"] below). */
	--zwf-font-en: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--zwf-font-ar: "IBM Plex Sans Arabic", "Manrope", system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
	--zwf-font-sans: var(--zwf-font-en);
	--zwf-fs-hero: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem);

	--zwf-fs-xs: 0.8125rem;   /* 13px */
	--zwf-fs-sm: 0.875rem;    /* 14px */
	--zwf-fs-base: 1rem;      /* 16px */
	--zwf-fs-body: 1rem;      /* 16px mobile, 17px desktop (see below) */
	--zwf-fs-lg: 1.1875rem;   /* 19px */
	--zwf-fs-xl: 1.5rem;      /* 24px */
	--zwf-fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	--zwf-fs-h2: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);
	--zwf-fs-h1: clamp(2.125rem, 1.6rem + 2vw, 3.25rem);
	--zwf-fs-display: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);

	--zwf-fw-regular: 400;
	--zwf-fw-medium: 500;
	--zwf-fw-semibold: 600;
	--zwf-fw-bold: 700;
	--zwf-fw-extrabold: 800;

	--zwf-lh-tight: 1.05;
	--zwf-lh-heading: 1.15;
	--zwf-lh-snug: 1.35;
	--zwf-lh-body: 1.6;

	--zwf-ls-display: -0.03em;
	--zwf-ls-heading: -0.015em;
	--zwf-ls-label: 0.06em;
	--zwf-ls-title: -0.01em;
	--zwf-ls-meta: 0.02em;
	--zwf-ls-number: -0.02em;

	--zwf-measure: 68ch;

	/* ---------- Spacing (4/8 scale) ---------- */
	--zwf-space-1: 4px;
	--zwf-space-2: 8px;
	--zwf-space-3: 12px;
	--zwf-space-4: 16px;
	--zwf-space-5: 24px;
	--zwf-space-6: 32px;
	--zwf-space-7: 48px;
	--zwf-space-8: 64px;
	--zwf-space-9: 80px;
	--zwf-space-10: 96px;
	--zwf-section-y: clamp(64px, 5vw + 40px, 96px);

	/* ---------- Containers ---------- */
	--zwf-container: 1240px;
	--zwf-container-wide: 1400px;
	--zwf-container-read: 760px;
	--zwf-gutter: 16px;

	/* ---------- Radius (locked rule) ---------- */
	--zwf-radius-xs: 6px;    /* checkboxes */
	--zwf-radius-sm: 8px;    /* small controls, thumbnails inside cards */
	--zwf-radius-md: 12px;   /* buttons, inputs */
	--zwf-radius-lg: 18px;   /* cards */
	--zwf-radius-xl: 24px;   /* large panels */
	--zwf-radius-pill: 999px;/* badges, chips */

	/* ---------- Elevation (used sparingly) ---------- */
	--zwf-shadow-float: 0 18px 40px -20px rgba(2, 8, 18, 0.75);
	--zwf-shadow-card-hover: 0 14px 30px -22px rgba(2, 8, 18, 0.9);

	/* ---------- Motion ---------- */
	--zwf-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--zwf-dur-fast: 120ms;
	--zwf-dur: 200ms;
	--zwf-dur-slow: 360ms;

	/* ---------- Layout ---------- */
	--zwf-header-h: 64px;
	--zwf-admin-bar: 0px;

	/* ---------- Controls ---------- */
	--zwf-control-h-sm: 36px;
	--zwf-control-h: 44px;
	--zwf-control-h-lg: 52px;

	/* ---------- Layers ---------- */
	--zwf-z-header: 100;
	--zwf-z-drawer: 200;
}

/* Breakpoints (aligned with Elementor defaults):
 * mobile  <= 767px | tablet 768-1024px | desktop >= 1025px | large >= 1281px */
@media (min-width: 768px) {
	:root {
		--zwf-gutter: 24px;
	}
}
@media (min-width: 1025px) {
	:root {
		--zwf-gutter: 32px;
		--zwf-header-h: 72px;
		--zwf-fs-body: 1.0625rem; /* 17px */
	}
}

/* =========================================================
 * Language layer
 * Document language comes from <html lang> (set by WordPress + TranslatePress).
 * ======================================================= */
html[lang^="en"] {
	font-family: var(--zwf-font-en);
}

/* Arabic: own font, calmer leading, NO tracking (letter-spacing breaks Arabic joining). */
html[lang^="ar"] {
	font-family: var(--zwf-font-ar);
	--zwf-font-sans: var(--zwf-font-ar);
	--zwf-fs-body: 1.0625rem;           /* 17px: Plex Arabic reads smaller than Manrope */
	--zwf-fs-hero: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem);
	--zwf-fs-display: clamp(2.25rem, 1.5rem + 3vw, 4rem);
	--zwf-fs-h1: clamp(2rem, 1.55rem + 1.8vw, 3rem);
	--zwf-fs-h2: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
	--zwf-lh-tight: 1.3;
	--zwf-lh-heading: 1.4;
	--zwf-lh-snug: 1.6;
	--zwf-lh-body: 1.85;
	--zwf-ls-display: 0;
	--zwf-ls-heading: 0;
	--zwf-ls-label: 0;
	--zwf-ls-title: 0;
	--zwf-ls-meta: 0;
	--zwf-ls-number: 0;
}

@media (min-width: 1025px) {
	html[lang^="ar"] {
		--zwf-fs-body: 1.125rem;        /* 18px desktop */
	}
}

/* Elementor Kit sets Manrope on body/headings with .elementor-kit-N selectors;
 * on Arabic pages the language font must win, and Elementor widgets using global fonts follow. */
html[lang^="ar"] body,
html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[lang^="ar"] h5,
html[lang^="ar"] h6 {
	font-family: var(--zwf-font-ar);
}

html[lang^="ar"] body[class*="elementor-kit-"] {
	--e-global-typography-primary-font-family: "IBM Plex Sans Arabic", "Manrope";
	--e-global-typography-secondary-font-family: "IBM Plex Sans Arabic", "Manrope";
	--e-global-typography-text-font-family: "IBM Plex Sans Arabic", "Manrope";
	--e-global-typography-accent-font-family: "IBM Plex Sans Arabic", "Manrope";
}

/* Islands of the other language inside a page (e.g. the language switcher labels). */
body [lang|="ar"] {
	font-family: var(--zwf-font-ar);
	letter-spacing: 0;
}

body [lang|="en"] {
	font-family: var(--zwf-font-en);
}

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