/**
 * Design Tokens — Flavor Starter Child (رداء)
 *
 * Premium purple palette matched to brand logo.
 */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&family=Amiri:wght@400;700&display=swap');

:root {
	/* === Colors === */

	/* Brand palette — muted and quiet */
	--color-primary: #6B4E75;
	--color-primary-light: #8B6E96;
	--color-primary-dark: #4A3353;
	--color-accent: #A58CAE;
	--color-accent-light: #C2ABCB;
	--color-accent-dark: #816A8A;
	--color-secondary: #DBCDE0;
	--color-secondary-light: #EEE4F1;

	/* Gold accent for luxury feel */
	--color-gold: #C9A84C;
	--color-gold-light: #E6D595;

	/* Neutrals */
	--color-white: #ffffff;
	--color-off-white: #FAFAFA;
	--color-gray-50: #F7F5F9;
	--color-gray-100: #F0EDF3;
	--color-gray-200: #E4DFE9;
	--color-gray-300: #D1C9DA;
	--color-gray-400: #B0A3BD;
	--color-gray-500: #8E7FA0;
	--color-gray-600: #6D5E80;
	--color-gray-700: #4A3D5C;
	--color-gray-800: #2E2440;
	--color-gray-900: #1A1128;
	--color-black: #0D0815;

	/* Semantic */
	--color-success: #2ECC71;
	--color-warning: #F39C12;
	--color-error: #E74C3C;
	--color-info: #3498DB;

	/* Surface */
	--color-bg: #FCFBFC;
	--color-bg-alt: var(--color-gray-50);
	--color-surface: var(--color-white);
	--color-text: var(--color-gray-800);
	--color-text-muted: var(--color-gray-500);
	--color-text-inverse: var(--color-white);
	--color-border: rgba(0, 0, 0, 0.06);

	/* === Typography === */

	--font-primary: 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-heading: 'Amiri', 'Georgia', serif;

	/* Font sizes (modular scale 1.25) */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.25rem;
	--text-xl: 1.5rem;
	--text-2xl: 1.875rem;
	--text-3xl: 2.25rem;
	--text-4xl: 3rem;
	--text-5xl: 3.75rem;

	/* Font weights */
	--font-light: 300;
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-extrabold: 800;

	/* Line heights */
	--leading-tight: 1.35;
	--leading-normal: 1.6;
	--leading-relaxed: 1.8;

	/* Letter spacing (zero for connected Arabic script) */
	--tracking-tight: 0;
	--tracking-normal: 0;
	--tracking-wide: 0;
	--tracking-wider: 0;
	--tracking-widest: 0;

	/* === Spacing === */

	--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;

	/* === Layout === */

	--container-max: 1280px;
	--container-padding: var(--space-6);
	--grid-gap: var(--space-6);
	--section-gap: var(--space-16);

	/* === Borders === */

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-2xl: 24px;
	--radius-full: 9999px;

	--border-thin: 1px solid var(--color-border);
	--border-medium: 2px solid var(--color-border);

	/* === Shadows === */

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.04);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.06);
	--shadow-card: 0 2px 10px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.02);
	--shadow-card-hover: 0 12px 36px rgba(0, 0, 0, 0.06);

	/* === Transitions === */

	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

	/* === Z-Index === */

	--z-dropdown: 100;
	--z-sticky: 200;
	--z-overlay: 300;
	--z-modal: 400;
	--z-toast: 500;
}