/**
 * Ashshakur Design System — Global Tokens
 * Palette: Purple · White · Jet Black
 */

:root {
	/* ── Brand Colors ── */
	--as-purple-900: #1a0a2e;
	--as-purple-800: #2d1b4e;
	--as-purple-700: #4a1d96;
	--as-purple-600: #6b21a8;
	--as-purple-500: #9333ea;
	--as-purple-400: #a855f7;
	--as-purple-300: #c084fc;
	--as-purple-200: #e9d5ff;
	--as-purple-100: #f3e8ff;

	--as-black: #0a0a0a;
	--as-jet: #121212;
	--as-charcoal: #1e1e1e;

	--as-white: #ffffff;
	--as-off-white: #faf9fc;
	--as-cream: #f5f3f8;
	--as-sand: #f5f3ea;

	/* Accent — soft gold for luxury highlights on purple */
	--as-gold: #d4a853;
	--as-gold-light: #f0d78c;
	--as-gold-glow: rgba(212, 168, 83, 0.35);

	/* Semantic */
	--as-bg-primary: var(--as-off-white);
	--as-bg-dark: var(--as-jet);
	--as-bg-hero: var(--as-purple-900);
	--as-text-primary: var(--as-black);
	--as-text-inverse: var(--as-white);
	--as-text-muted: #6b7280;
	--as-accent: var(--as-purple-500);
	--as-accent-hover: var(--as-purple-600);

	/* Gradients */
	--as-gradient-hero: linear-gradient(135deg, var(--as-purple-900) 0%, var(--as-purple-700) 45%, var(--as-jet) 100%);
	--as-gradient-card: linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
	--as-gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(147, 51, 234, 0.25) 0%, transparent 70%);

	/* Glass */
	--as-glass-bg: rgba(255, 255, 255, 0.08);
	--as-glass-border: rgba(255, 255, 255, 0.14);
	--as-glass-blur: 16px;

	/* Spacing — 8px grid */
	--as-space-1: 0.5rem;   /* 8px */
	--as-space-2: 1rem;     /* 16px */
	--as-space-3: 1.5rem;   /* 24px */
	--as-space-4: 2rem;     /* 32px */
	--as-space-5: 2.5rem;   /* 40px */
	--as-space-6: 3rem;     /* 48px */
	--as-space-8: 4rem;     /* 64px */
	--as-space-10: 5rem;    /* 80px */
	--as-space-12: 6rem;    /* 96px */
	--as-space-16: 8rem;    /* 128px */

	/* Typography */
	--as-font-display: "Playfair Display", "Amiri", Georgia, serif;
	--as-font-body: "Inter", "Source Sans 3", system-ui, sans-serif;
	--as-font-arabic: "Scheherazade New", "Amiri", serif;

	--as-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
	--as-text-sm: clamp(0.875rem, 0.82rem + 0.3vw, 0.9375rem);
	--as-text-base: clamp(1rem, 0.95rem + 0.35vw, 1.0625rem);
	--as-text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
	--as-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--as-text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--as-text-3xl: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
	--as-text-4xl: clamp(2.5rem, 2rem + 2vw, 3.75rem);
	--as-text-5xl: clamp(3rem, 2.2rem + 3vw, 5rem);

	/* Motion */
	--as-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--as-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--as-duration-fast: 200ms;
	--as-duration-base: 400ms;
	--as-duration-slow: 700ms;

	/* Layout */
	--as-container-max: 1280px;
	--as-container-narrow: 960px;
	--as-radius-sm: 12px;
	--as-radius-md: 20px;
	--as-radius-lg: 28px;
	--as-radius-xl: 36px;

	/* Shadows */
	--as-shadow-sm: 0 2px 8px rgba(10, 10, 10, 0.06);
	--as-shadow-md: 0 8px 32px rgba(10, 10, 10, 0.1);
	--as-shadow-lg: 0 16px 48px rgba(10, 10, 10, 0.14);
	--as-shadow-glow: 0 0 40px rgba(147, 51, 234, 0.2);
}

/* ── Base Resets (scoped to theme sections) ── */
.as-section {
	position: relative;
	padding-block: var(--as-space-8);
	overflow: hidden;
}

/* Gradient accent text */
.as-text-gradient {
	background: linear-gradient(120deg, var(--as-purple-300) 0%, var(--as-purple-500) 45%, var(--as-gold-light) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 200% auto;
	animation: as-gradient-shift 6s ease-in-out infinite alternate;
}

@keyframes as-gradient-shift {
	0% { background-position: 0% center; }
	100% { background-position: 100% center; }
}

/* Islamic geometric overlay utility */
.as-islamic-pattern {
	background-image:
		url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239333ea' fill-opacity='0.06'%3E%3Cpath d='M30 0l5 10 10 5-10 5-5 10-5-10-10-5 10-5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.is-hidden {
	opacity: 0;
	visibility: hidden;
}

.is-visible-block {
	opacity: 1;
	visibility: visible;
}

.as-container {
	width: min(100% - clamp(2rem, 6vw, 5rem), var(--as-container-max));
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
}

.as-container--narrow {
	width: min(100% - var(--as-space-4), var(--as-container-narrow));
}

/* Glass card utility */
.as-glass {
	background: var(--as-glass-bg);
	backdrop-filter: blur(var(--as-glass-blur));
	-webkit-backdrop-filter: blur(var(--as-glass-blur));
	border: 1px solid var(--as-glass-border);
	border-radius: var(--as-radius-lg);
}

/* Reveal animation base — JS adds .is-visible */
.as-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--as-duration-slow) var(--as-ease-out),
		transform var(--as-duration-slow) var(--as-ease-out);
}

.as-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.as-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Focus visible for accessibility */
.as-btn:focus-visible,
a:focus-visible {
	outline: 2px solid var(--as-purple-400);
	outline-offset: 3px;
}

/* Dark sections use light glass */
.as-section[class*="as-timeline"],
.as-section[class*="as-pricing"],
.as-section[class*="as-charity"],
.as-hero {
	--as-glass-bg: rgba(255, 255, 255, 0.06);
	--as-glass-border: rgba(255, 255, 255, 0.12);
}