:root {
	--color-paper: #F2EFE8;
	--color-mineral: #E5E0D6;
	--color-charcoal: #242522;
	--color-ink: #181817;
	--color-graphite: #6B6861;
	--color-terracotta: #B64F36;
	--color-burnt-clay: #873724;
	--color-stone-line: #C9C3B8;
	--color-dust: #D9D3C8;
	--color-chalk: #F2EFE8;

	--color-bg: var(--color-paper);
	--color-surface: var(--color-mineral);
	--color-text: var(--color-ink);
	--color-text-muted: var(--color-graphite);
	--color-accent: var(--color-terracotta);
	--color-accent-dark: var(--color-burnt-clay);
	--color-border: var(--color-stone-line);

	--font-arabic-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
	--font-arabic-body: "IBM Plex Sans Arabic", "Noto Kufi Arabic", sans-serif;
	--font-latin-display: "Source Serif 4", Georgia, serif;
	--font-latin-interface: "IBM Plex Sans", Arial, sans-serif;

	--type-display: clamp(5.5rem, 8vw, 7.5rem);
	--type-h1: clamp(4rem, 6vw, 5rem);
	--type-h2: clamp(2.75rem, 4vw, 3.5rem);
	--type-h3: clamp(1.75rem, 2.5vw, 2.25rem);
	--type-body-large: clamp(1.375rem, 1.8vw, 1.625rem);
	--type-body: clamp(1.0625rem, 1.2vw, 1.1875rem);
	--type-small: 0.9375rem;
	--type-caption: 0.75rem;
	--type-navigation: 1rem;
	--type-button: 1rem;
	--type-label: 0.75rem;

	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 40px;
	--space-2xl: 64px;
	--space-3xl: 96px;
	--space-4xl: 144px;
	--space-section: clamp(160px, 14vw, 240px);

	--content-max-width: 1440px;
	--margin-desktop: clamp(24px, 5vw, 88px);
	--margin-tablet: 40px;
	--margin-mobile: 20px;
	--gap-desktop: 24px;
	--gap-tablet: 20px;
	--gap-mobile: 16px;
	--border-width: 1px;
	--radius-small: 2px;
	--duration-fast: 200ms;
	--duration-hover: 280ms;
	--duration-menu: 500ms;
	--duration-reveal: 750ms;
	--ease-khayal: cubic-bezier(0.22, 1, 0.36, 1);
}