:root {

	/* === TYPOGRAPHY === */
	--font-family-primary: 'Barlow', Arial, Roboto, sans-serif;


	--font-size-xl: 1.5rem;
	--font-size-lg: 1.25rem;
	--font-size-md: 1rem;
	--font-size-sm: 0.875rem;
	--font-size-xs: 0.75rem;
	--font-size-xxs: 0.7rem;
	--font-size-hero: 2.5rem;
	--font-size-heading: 2rem;

	--font-weight-light: 200;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;


	/* === SPACING === */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-xxl: 3rem;
	--spacing-xxxl: 4rem;

	/* === DIMENSIONS === */
	--border-radius: 12px;
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 12px;
	--border-radius-full: 50%;

	--logo-height: 80px;
	--logo-height-mobile: 60px;
	--logo-height-small: 48px;

	--menu-mobile-width: 80%;
	--menu-mobile-max-width: 320px;
	--menu-submenu-min-width: 180px;

	/* === TRANSITIONS === */
	--transition-fast: 0.1s ease;
	--transition-normal: 0.2s ease;
	--transition-smooth: 0.3s ease;
	--transition-bounce: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* === Z-INDEX === */
	--z-index-overlay: 999;
	--z-index-menu: 1000;
	--z-index-hamburger: 1001;

	/* === LAYOUT === */
	--container-max-width: 1000px;
	--container-padding: 2rem;
	--container-padding-mobile: 1rem;
	--container-padding-small: 0.5rem;
}