/* ==========================================================================
   Leen Al-Diaa — design tokens
   Colours from the logo · fluid type & space · self-hosted fonts
   ========================================================================== */

@font-face { font-family: "Tajawal"; font-weight: 400; font-display: swap; src: url(../fonts/tajawal-arabic-400.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Tajawal"; font-weight: 500; font-display: swap; src: url(../fonts/tajawal-arabic-500.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Tajawal"; font-weight: 700; font-display: swap; src: url(../fonts/tajawal-arabic-700.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Tajawal"; font-weight: 400; font-display: swap; src: url(../fonts/tajawal-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Tajawal"; font-weight: 500; font-display: swap; src: url(../fonts/tajawal-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Tajawal"; font-weight: 700; font-display: swap; src: url(../fonts/tajawal-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(../fonts/inter-latin-700.woff2) format("woff2"); }

:root {
	/* Brand */
	--c-blue-900: #0d3a7a;
	--c-blue-700: #1565C0;
	--c-blue-500: #2196F3;
	--c-blue-100: #e3f0fd;
	--c-orange-700: #C2510F; /* small text on white: 4.6:1 */
	--c-orange-600: #F37021;
	--c-orange-400: #FF9A3C;
	--c-orange-100: #fff0e5;
	--c-navy-900: #0B2545;
	--c-navy-800: #12325a;
	--c-navy-600: #3b5578;
	--c-slate-500: #5b6b80; /* body-muted on white: 5.6:1 */
	--c-line: #dde5ef;
	--c-surface: #F5F7FA;
	--c-white: #FFFFFF;
	--c-success: #1f9d55;
	--c-wa: #25D366;

	/* Semantic */
	--bg: var(--c-white);
	--bg-alt: var(--c-surface);
	--text: var(--c-navy-900);
	--text-muted: var(--c-slate-500);
	--link: var(--c-blue-700);
	--focus: var(--c-orange-600);

	--grad-brand: linear-gradient(135deg, var(--c-blue-700), var(--c-blue-500));
	--grad-accent: linear-gradient(135deg, var(--c-orange-600), var(--c-orange-400));
	--grad-night: linear-gradient(160deg, #0B2545 0%, #0f3566 55%, #1565C0 130%);
	--glass-bg: rgba(255, 255, 255, .12);
	--glass-border: rgba(255, 255, 255, .28);
	--glass-blur: saturate(160%) blur(14px);

	/* Type */
	--font-ar: "Tajawal", "Segoe UI", Tahoma, sans-serif;
	--font-en: "Inter", "Segoe UI", system-ui, sans-serif;
	--font: var(--font-ar);
	--fs-xs: .8125rem;
	--fs-sm: .9375rem;
	--fs-base: 1.0625rem;
	--fs-md: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
	--fs-lg: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
	--fs-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);
	--fs-3xl: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem);
	--fs-4xl: clamp(2.4rem, 1.6rem + 3.6vw, 4.5rem);
	--lh: 1.75;
	--lh-tight: 1.3;

	/* Space */
	--space-1: .25rem;
	--space-2: .5rem;
	--space-3: .75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	--space-8: clamp(3.5rem, 2.5rem + 4vw, 6rem);
	--space-9: clamp(4.5rem, 3rem + 6vw, 8rem);

	/* Shape & depth */
	--radius-s: 8px;
	--radius-m: 14px;
	--radius-l: 22px;
	--radius-xl: 32px;
	--radius-pill: 999px;
	--shadow-1: 0 1px 2px rgba(11, 37, 69, .06), 0 2px 8px rgba(11, 37, 69, .06);
	--shadow-2: 0 6px 24px -6px rgba(11, 37, 69, .16);
	--shadow-3: 0 24px 60px -18px rgba(11, 37, 69, .32);
	--shadow-accent: 0 10px 28px -8px rgba(243, 112, 33, .55);

	/* Layout */
	--container: 1240px;
	--gutter: clamp(1rem, .5rem + 2.5vw, 2rem);
	--header-h: 84px;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--dur: .35s;
}

:root:lang(en), [lang="en-US"] { --font: var(--font-en); --lh: 1.65; }