/* ==========================================================================
   Aleeya Car Rental — Design Tokens
   ========================================================================== */
:root {
	/* Colours */
	--black: #111111;
	--red: #c00000;
	--red-dark: #8a0000;
	--white: #ffffff;
	--grey-900: #1a1a1a;
	--grey-800: #2b2b2b;
	--grey-700: #3a3a3a;
	--grey-500: #6b7280;
	--grey-400: #9ca3af;
	--grey-200: #e5e7eb;
	--grey-100: #f4f5f7;
	--grey-50: #fafafa;

	/* Semantic */
	--color-text: #1c1c1c;
	--color-text-muted: #5b6270;
	--color-bg: #ffffff;
	--color-bg-alt: #f7f8fa;
	--color-border: #e8eaed;
	--whatsapp: #25d366;
	--whatsapp-dark: #128c7e;

	/* Gradients */
	--cta-gradient: linear-gradient(135deg, #c00000 0%, #8a0000 100%);
	--dark-gradient: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);

	/* Typography */
	--font-heading: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--fs-h1: clamp(2.1rem, 1.4rem + 3vw, 3.5rem);
	--fs-h2: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
	--fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
	--fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;

	/* Spacing scale */
	--space-1: 0.5rem;
	--space-2: 0.75rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;
	--space-7: 4rem;
	--space-8: 6rem;

	/* Layout */
	--container: 1200px;
	--container-narrow: 800px;
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(17, 17, 17, 0.06), 0 1px 2px rgba(17, 17, 17, 0.04);
	--shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
	--shadow-md: 0 18px 40px rgba(17, 17, 17, 0.12);
	--shadow-red: 0 10px 26px rgba(192, 0, 0, 0.32);
	--shadow-wa: 0 10px 26px rgba(37, 211, 102, 0.4);

	/* Motion */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--transition: 0.25s var(--ease);

	--header-h: 76px;
}