/**
 * Asmae — tokens
 *
 * The complete design vocabulary. Nothing outside this file may introduce a
 * colour, a size, a radius or a duration.
 *
 * Declared on :root rather than on a wrapper class. The previous stylesheet
 * scoped its variables to .asmae-page, which the homepage never renders —
 * every var() fell through and an entire section inherited the theme's link
 * blue. Root scope removes that whole class of failure.
 *
 * Design System v2, section 3.
 *
 * @package Asmae
 */

:root {

	/* --- Colour: neutral (blue-cast, never pure grey) ------------------ */

	--asmae-ink-900: #12131f; /* dark band grounds */
	--asmae-ink-800: #1b1d2e; /* primary text, solid buttons */
	--asmae-ink-600: #454a63; /* secondary text, glosses */
	--asmae-ink-400: #767c94; /* labels, counts, placeholders — never body */
	--asmae-ink-100: #eef0f6; /* every border and hairline */
	--asmae-ink-050: #f5f6fa; /* hover fill */


	/* --- Colour: primary ---------------------------------------------- */

	--asmae-primary-700: #3a2fa8;
	--asmae-primary-600: #4a3cd1; /* links, focus, selected */
	--asmae-primary-100: #edeafd;
	--asmae-primary-grad: linear-gradient(135deg, #7c5cff 0%, #8b73ff 52%, #9b84ff 100%);

	/* --- Colour: brass (editorial metal — four uses per page) ---------- */

	--asmae-brass-600: #8a6a2f;
	--asmae-brass-500: #b08d4f;
	--asmae-brass-100: #f0e7d6;

	/* --- Colour: green (meaning and religious axis) -------------------- */

	--asmae-green-800: #1a4d38; /* text on the green band */
	--asmae-green-050: #f2f7f3; /* green band ground */
	--asmae-green-line: #d8e6dc;
	--asmae-green-600: #1f6b4a;
	--asmae-green-100: #e4f2ea;

	/* --- Colour: semantic (rulings and system notices only) ------------ */

	--asmae-warn-600: #8a5a08;
	--asmae-warn-100: #fcf2de;
	--asmae-danger-600: #9b2c2c;
	--asmae-danger-100: #fbeaea;

	/* --- Gender edge --------------------------------------------------- */

	--asmae-boy: #7aa7f5;
	--asmae-girl: #e08ac4;

	/* --- Colour: category icon backgrounds (home page CTA cards) ------- */
	/* Distinct pastel per category, matching the reference mockup. Used
	   only on the homepage category grid, nowhere else. */
	--asmae-cat-girl-bg:    #fde7ef; --asmae-cat-girl-fg:    #d6588d;
	--asmae-cat-boy-bg:     #e7eefd; --asmae-cat-boy-fg:     #4a72d6;
	--asmae-cat-islam-bg:   #e6f5ea; --asmae-cat-islam-fg:   #2f8f52;
	--asmae-cat-foreign-bg: #eceafd; --asmae-cat-foreign-fg: #6d4df6;
	--asmae-cat-arabic-bg:  #fdece0; --asmae-cat-arabic-fg:  #c9662a;
	--asmae-cat-rare-bg:    #f6e7fb; --asmae-cat-rare-fg:    #9438b8;
	--asmae-cat-amazigh-bg: #e2f6f2; --asmae-cat-amazigh-fg: #1c9080;
	--asmae-cat-quran-bg:   #eaf0fb; --asmae-cat-quran-fg:   #3457a6;

	/* --- Type ---------------------------------------------------------- */

	--asmae-font-display: "Cairo", "Tajawal", "Noto Sans Arabic", system-ui, sans-serif;
	--asmae-font-text: "Cairo", "Tajawal", "Noto Sans Arabic", system-ui, sans-serif;
	--asmae-font-scripture: "Amiri", "IBM Plex Sans Arabic", serif;

	--asmae-size-display: 3.5rem;  /* 52px — once per page, in the hero */
	--asmae-size-title: 1.9rem;    /* 28px — section headings, featured name */
	--asmae-size-subtitle: 1.3rem; /* 20px — card names, collection titles */
	--asmae-size-body: 1.0625rem;        /* 16px */
	--asmae-size-small: 0.9375rem;   /* 14px — glosses */
	--asmae-size-micro: 0.8125rem;    /* 12px — labels, counts */

	--asmae-lh-display: 1.35;
	--asmae-lh-title: 1.45;
	--asmae-lh-subtitle: 1.6;
	--asmae-lh-body: 1.8;

	/* --- Space (6 steps) ----------------------------------------------- */

	--asmae-space-1: 4px;
	--asmae-space-2: 8px;
	--asmae-space-3: 16px;
	--asmae-space-4: 24px;
	--asmae-space-5: 40px;
	--asmae-space-6: 64px;

	--asmae-section: 64px; /* between sections */
	--asmae-anchor: 96px;  /* around the hero and the finder — twice per page */

	/* --- Radius (3) ---------------------------------------------------- */

	--asmae-r-sm: 8px;
	--asmae-r-md: 12px;
	--asmae-r-lg: 20px;

	/* --- Elevation (3) ------------------------------------------------- */

	--asmae-e-1: 0 2px 8px rgba(18, 19, 31, 0.06);
	--asmae-e-2: 0 12px 32px rgba(18, 19, 31, 0.12);

	/*
	 * Surface elevation. Two shadows rather than one: a tight contact
	 * shadow for definition plus a wide soft one for depth. A single blur
	 * is what makes a card look like a default browser box.
	 */
	--asmae-e-card: 0 1px 2px rgba(18, 19, 31, 0.03), 0 2px 10px rgba(18, 19, 31, 0.04);
	--asmae-e-card-hover: 0 2px 6px rgba(18, 19, 31, 0.05), 0 14px 32px rgba(18, 19, 31, 0.11);

	/* --- Motion (4 rules, 2 durations) --------------------------------- */

	--asmae-ease: cubic-bezier(0.2, 0, 0.1, 1);
	--asmae-fast: 160ms;
	--asmae-slow: 240ms;

	/* --- Layout -------------------------------------------------------- */

	--asmae-max: 1120px;
	--asmae-measure: 720px;
}

@media (max-width: 640px) {

	:root {
		--asmae-size-display: 2.2rem;     /* 32px */
		--asmae-size-title: 1.5rem;   /* 22px */
		--asmae-size-subtitle: 1.2rem;/* 18px */

		--asmae-section: 40px;
		--asmae-anchor: 64px;
	}
}