/* ==========================================================================
   Al-Azhar Academy — theme.css
   Design tokens ONLY. Loaded before every other stylesheet.

   Look & feel: "bright warmth". A playful, hand-made type system — script
   headings, a rounded sub-heading face, a storybook serif for reading — sitting
   on calm, engineered surfaces: soft layered shadows, glassy chrome, hairline
   gradient borders, and one confident blue accent with a warm gold used
   sparingly for highlights.

   Every colour is a token, and the dark theme below only re-points the same
   names, so no component needs to know which theme is active.
   ========================================================================== */

:root {
	color-scheme: light;

	/* ---- Palette: accent (blue) ----------------------------------------- */
	--accent-050: #f4f7ff;
	--accent-100: #e8efff;
	--accent-200: #cddcff;
	--accent-300: #a8c3ff;
	--accent-500: #3379ff;
	--accent-600: #0f62fe;
	--accent-700: #0043ce;
	--accent-wash: rgba(15, 98, 254, 0.08);

	/* ---- Palette: warm highlight (decorative only) ---------------------- */
	--sun-100: #fff4e2;
	--sun-300: #ffd08a;
	--sun-500: #f2a33c;
	--sun-700: #9a6205;

	/* ---- Palette: cool neutrals ---------------------------------------- */
	--ink-050: #f5f7fa;
	--ink-100: #eaeef5;
	--ink-200: #dde3ec;
	--ink-300: #c2cad8;
	--ink-400: #97a3b6;
	--ink-500: #6b7a91;
	--ink-600: #46566f;
	--ink-700: #2b3a52;
	--ink-800: #16233a;
	--ink-900: #0a1526;
	--navy-900: #071427;
	--white: #ffffff;

	/* ---- Semantic surfaces & text -------------------------------------- */
	--bg: var(--ink-050);
	--surface: var(--white);
	--surface-muted: var(--ink-100);
	--surface-sunken: var(--ink-050);
	--surface-inverse: var(--navy-900);
	--border: var(--ink-200);
	--border-strong: var(--ink-300);
	--text: var(--ink-900);
	--text-muted: var(--ink-600);
	--text-subtle: var(--ink-500);
	--text-inverse: #eef3fb;
	--text-inverse-muted: #a6b4ca;

	/* ---- Glass chrome (header, sticky bars, quick-action button) -------- */
	--glass-bg: rgba(255, 255, 255, 0.72);
	--glass-bg-strong: rgba(255, 255, 255, 0.86);
	--glass-border: rgba(255, 255, 255, 0.6);
	--glass-blur: 16px;
	--glass-tint: rgba(15, 98, 254, 0.06);

	/* ---- Hairline gradient borders (the "premium card" edge) ----------- */
	--hairline: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(10, 21, 38, 0.1) 42%, rgba(15, 98, 254, 0.22));
	--hairline-strong: linear-gradient(140deg, var(--accent-200), rgba(255, 255, 255, 0.2) 40%, var(--sun-300));

	/* ---- Ambient page washes ------------------------------------------- */
	--wash-hero: radial-gradient(120% 90% at 12% 0%, rgba(15, 98, 254, 0.14) 0%, rgba(15, 98, 254, 0) 58%),
		radial-gradient(90% 80% at 96% 8%, rgba(242, 163, 60, 0.16) 0%, rgba(242, 163, 60, 0) 60%);

	/* ---- Status --------------------------------------------------------- */
	--success: #0f7b53;
	--success-bg: #e6f5ee;
	--warning: #8a5a00;
	--warning-bg: #fdf4e3;
	--danger: #b3261e;
	--danger-bg: #fcedec;

	/* ---- Focus ring (never animated away) ------------------------------- */
	--focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--accent-600);
	--focus-ring-inverse: 0 0 0 2px var(--navy-900), 0 0 0 4px #7aa7ff;

	/* ---- Typography families -------------------------------------------
	   One job each, no overlap:
	     display  h1, h2 and the wordmark      (Story Script)
	     heading  h3, h4, card titles, buttons (DynaPuff)
	     sans     body copy, everything long   (Benne)
	     label    eyebrows and tracked caps    (Original Surfer)
	     script   footer headings only         (Yellowtail)
	   Every stack ends in a generic family, so a failed download still reads. */
	--font-display: 'Story Script', 'Yellowtail', 'Segoe Script', ui-serif, Georgia, cursive;
	--font-heading: 'DynaPuff', 'Trebuchet MS', ui-rounded, 'Segoe UI', system-ui, sans-serif;
	--font-sans: 'Benne', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--font-label: 'Original Surfer', 'Trebuchet MS', ui-rounded, 'Segoe UI', system-ui, sans-serif;
	--font-script: 'Yellowtail', 'Story Script', 'Segoe Script', cursive;

	/* ---- Fluid type scale ---------------------------------------------- */
	--fs-100: 0.75rem; /* 12 — tracked labels */
	--fs-200: 0.8125rem; /* 13 */
	--fs-300: 0.875rem; /* 14 — small print */
	--fs-400: 1rem; /* 16 — body */
	--fs-450: 1.0625rem; /* 17 — lede */
	--fs-500: 1.1875rem; /* 19 — card titles */
	--fs-600: 1.375rem; /* 22 — sub headings */
	--fs-700: clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem); /* h3 */
	--fs-800: clamp(1.65rem, 1.3rem + 1.5vw, 2.2rem); /* h2 */
	--fs-900: clamp(2rem, 1.45rem + 2.4vw, 3.1rem); /* h1 */

	/* Script and rounded faces need more air than a neutral sans. */
	--lh-tight: 1.2;
	--lh-snug: 1.35;
	--lh-normal: 1.6;
	--lh-relaxed: 1.75;

	--tracking-label: 0.14em;
	--tracking-tight: 0.005em;
	--tracking-heading: 0.005em;
	--measure: 64ch;
	--measure-narrow: 50ch;

	/* ---- Spacing scale (4px base) -------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* ---- Radii ---------------------------------------------------------- */
	--radius-xs: 8px;
	--radius-sm: 12px;
	--radius-md: 18px;
	--radius-lg: 26px;
	--radius-xl: 34px;
	--radius-2xl: 44px;
	--radius-pill: 999px;

	/* ---- Soft, layered, engineered shadows ------------------------------ */
	--shadow-xs: 0 1px 2px rgba(10, 21, 38, 0.06);
	--shadow-sm: 0 1px 3px rgba(10, 21, 38, 0.06), 0 1px 2px rgba(10, 21, 38, 0.04);
	--shadow-md: 0 6px 16px -6px rgba(10, 21, 38, 0.14), 0 2px 6px -2px rgba(10, 21, 38, 0.06);
	--shadow-lg: 0 18px 40px -18px rgba(10, 21, 38, 0.22), 0 6px 14px -8px rgba(10, 21, 38, 0.08);
	--shadow-xl: 0 34px 70px -30px rgba(10, 21, 38, 0.34), 0 12px 26px -16px rgba(10, 21, 38, 0.16);
	--shadow-accent: 0 10px 24px -14px rgba(15, 98, 254, 0.5);
	--shadow-accent-lg: 0 22px 44px -20px rgba(15, 98, 254, 0.55);
	--shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.7);
	--shadow-fab: 0 20px 40px -18px rgba(10, 21, 38, 0.45), 0 6px 14px -8px rgba(10, 21, 38, 0.2);

	/* ---- Gradients used as fills ---------------------------------------- */
	--grad-primary: linear-gradient(140deg, var(--accent-500) 0%, var(--accent-600) 46%, var(--accent-700) 100%);
	--grad-primary-hover: linear-gradient(140deg, #4b8bff 0%, var(--accent-600) 50%, #0046d6 100%);
	--grad-display-ink: linear-gradient(115deg, var(--ink-900) 6%, var(--accent-700) 58%, var(--sun-700) 112%);
	--grad-inverse-panel: linear-gradient(150deg, #0d1f3d 0%, var(--navy-900) 52%, #04101f 100%);

	/* ---- Motion --------------------------------------------------------- */
	--ease: cubic-bezier(0.22, 0.9, 0.3, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-back: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-100: 100ms;
	--dur-150: 150ms;
	--dur-200: 200ms;
	--dur-300: 300ms;
	--dur-reveal: 400ms;
	--dur-spring: 460ms;
	--dur-flip: 720ms;
	--dur-ambient: 20s; /* slow gradient drift */
	--stagger-step: 50ms;

	/* ---- Layout --------------------------------------------------------- */
	--container: 1200px;
	--container-narrow: 760px;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--header-h: 4.5rem;
	--section-y: clamp(3.5rem, 7vw, 6rem);
	--tap-target: 44px;

	/* ---- Layers --------------------------------------------------------- */
	--z-header: 100;
	--z-backdrop: 80;
	--z-nav: 90;
	--z-fab: 70;
	--z-toast: 120;
	--z-skip: 200;
}

/* ==========================================================================
   Dark theme
   Set as `data-theme="dark"` on <html> by the pre-paint inline script in each
   page, from the visitor's saved choice or their operating-system preference.
   Only the values change; every token name above stays available, so no
   component contains a single theme-specific rule.
   The inverse surfaces stay dark on purpose: the footer and the CTA band read
   as the deeper, calmer end of the page in both themes.
   ========================================================================== */
[data-theme='dark'] {
	color-scheme: dark;

	--accent-050: rgba(51, 121, 255, 0.12);
	--accent-100: rgba(51, 121, 255, 0.2);
	--accent-200: rgba(122, 167, 255, 0.42);
	--accent-300: rgba(153, 189, 255, 0.6);
	--accent-500: #5f96ff;
	--accent-600: #7aa7ff;
	--accent-700: #a8c3ff;
	--accent-wash: rgba(122, 167, 255, 0.1);

	--sun-100: rgba(242, 163, 60, 0.16);
	--sun-300: #f7c580;
	--sun-500: #f2a33c;
	--sun-700: #ffd08a;

	--ink-050: #070e1c;
	--ink-100: #0e1728;
	--ink-200: #1b2a45;
	--ink-300: #2a3c5d;
	--ink-400: #55708f;
	--ink-500: #8098b6;
	--ink-600: #a3b5cd;
	--ink-700: #c3d0e2;
	--ink-800: #dde6f2;
	--ink-900: #f2f6fc;
	--navy-900: #040a15;

	--bg: #070e1c;
	--surface: #0e1728;
	--surface-muted: #141f34;
	--surface-sunken: #0a1220;
	--surface-inverse: #040a15;
	--border: #1e2c48;
	--border-strong: #2e4064;
	--text: #eef3fb;
	--text-muted: #a9b8ce;
	--text-subtle: #8496b0;
	--text-inverse: #eef3fb;
	--text-inverse-muted: #a6b4ca;

	--glass-bg: rgba(9, 17, 32, 0.68);
	--glass-bg-strong: rgba(9, 17, 32, 0.86);
	--glass-border: rgba(255, 255, 255, 0.09);
	--glass-tint: rgba(122, 167, 255, 0.08);

	--hairline: linear-gradient(
		160deg,
		rgba(255, 255, 255, 0.16),
		rgba(255, 255, 255, 0.02) 45%,
		rgba(122, 167, 255, 0.3)
	);
	--hairline-strong: linear-gradient(
		140deg,
		rgba(122, 167, 255, 0.55),
		rgba(255, 255, 255, 0.06) 45%,
		rgba(247, 197, 128, 0.5)
	);

	--wash-hero: radial-gradient(120% 90% at 12% 0%, rgba(74, 130, 255, 0.22) 0%, rgba(74, 130, 255, 0) 58%),
		radial-gradient(90% 80% at 96% 8%, rgba(242, 163, 60, 0.14) 0%, rgba(242, 163, 60, 0) 60%);

	--success: #6fd6a5;
	--success-bg: rgba(15, 123, 83, 0.2);
	--warning: #ffc46b;
	--warning-bg: rgba(138, 90, 0, 0.22);
	--danger: #ff9d95;
	--danger-bg: rgba(179, 38, 30, 0.22);

	--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-600);

	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 8px 20px -8px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 22px 46px -20px rgba(0, 0, 0, 0.68), 0 8px 18px -10px rgba(0, 0, 0, 0.5);
	--shadow-xl: 0 40px 80px -34px rgba(0, 0, 0, 0.75), 0 14px 30px -18px rgba(0, 0, 0, 0.55);
	--shadow-accent: 0 12px 26px -14px rgba(74, 130, 255, 0.55);
	--shadow-accent-lg: 0 26px 50px -22px rgba(74, 130, 255, 0.6);
	--shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);
	--shadow-fab: 0 24px 46px -18px rgba(0, 0, 0, 0.7), 0 8px 18px -10px rgba(0, 0, 0, 0.5);

	--grad-primary: linear-gradient(140deg, #4a82ff 0%, #2f68e0 50%, #1b48b4 100%);
	--grad-primary-hover: linear-gradient(140deg, #6d9bff 0%, #3f7bef 50%, #2354c9 100%);
	--grad-display-ink: linear-gradient(115deg, #f6f9ff 4%, #cfe0ff 52%, #f7c580 108%);
	--grad-inverse-panel: linear-gradient(150deg, #101f3a 0%, #081222 52%, #03080f 100%);
}