/*
 * MASADER design tokens — the single place for colours, type and spacing.
 * Override any of these in masader-child/style.css (it loads after this file).
 */
:root {
	/* ---- Brand palette ------------------------------------------------ */
	--mx-ink:          #091D0D; /* headings & text on light, base of dark sections */
	--mx-mist:         #EFF5ED; /* light section background */
	--mx-sage:         #839085; /* secondary text */
	--mx-leaf:         #9DCB5B; /* cards, boxes, positive accents */
	--mx-gold:         #F4AF35; /* highlights & details */

	/* ---- Derived shades (same families) ------------------------------- */
	--mx-ink-900:      #0B2310;
	--mx-ink-800:      #10301A;
	--mx-ink-700:      #18402A;
	--mx-mist-50:      #F7FAF6;
	--mx-mist-200:     #DFE9DB;
	--mx-leaf-600:     #7FAF3E;
	--mx-leaf-200:     #D6EABA;
	--mx-gold-600:     #D9921A;
	--mx-gold-200:     #FBE0AE;
	--mx-paper:        #FBFCF9;

	--mx-line-dark:    rgba(239, 245, 237, 0.10); /* hairlines on dark */
	--mx-line-light:   rgba(9, 29, 13, 0.10);     /* hairlines on light */
	--mx-text-on-dark: rgba(239, 245, 237, 0.72);

	--mx-gradient-loop: linear-gradient(90deg, var(--mx-gold) 0%, #C9C05A 45%, var(--mx-leaf) 100%);

	/* ---- Typography --------------------------------------------------- */
	--mx-font-display: "Masader Display", Georgia, "Times New Roman", serif;
	--mx-font-body:    "Masader Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mx-font-mono:    "Masader Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
	--mx-font-arabic:  "Masader Arabic", "Amiri", "Noto Naskh Arabic", serif;

	--mx-text-xs:   0.75rem;
	--mx-text-sm:   0.875rem;
	--mx-text-base: 1rem;
	--mx-text-lg:   clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
	--mx-text-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
	--mx-text-2xl:  clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
	--mx-text-3xl:  clamp(2.5rem, 1.8rem + 3vw, 4.25rem);
	--mx-text-4xl:  clamp(3.1rem, 2rem + 4.6vw, 5.75rem);

	--mx-leading-tight: 1.06;
	--mx-leading-snug:  1.25;
	--mx-leading-body:  1.65;
	--mx-tracking-eyebrow: 0.18em;

	/* ---- Space, layout, shape ----------------------------------------- */
	--mx-space-1: 0.25rem;
	--mx-space-2: 0.5rem;
	--mx-space-3: 0.75rem;
	--mx-space-4: 1rem;
	--mx-space-5: 1.5rem;
	--mx-space-6: 2rem;
	--mx-space-7: 3rem;
	--mx-space-8: 4rem;
	--mx-space-section: clamp(4.5rem, 3rem + 7vw, 9rem);

	--mx-container: 1280px;
	--mx-gutter:    clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

	--mx-radius-sm: 6px;
	--mx-radius:    14px;
	--mx-radius-lg: 28px;

	--mx-shadow-soft: 0 1px 2px rgba(9, 29, 13, 0.06), 0 12px 32px -12px rgba(9, 29, 13, 0.18);
	--mx-shadow-deep: 0 30px 80px -30px rgba(0, 0, 0, 0.55);

	/* ---- Motion ------------------------------------------------------- */
	--mx-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
	--mx-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--mx-dur-fast:   180ms;
	--mx-dur:        420ms;
	--mx-dur-slow:   900ms;
}