@import "tailwindcss";

@theme {
	--color-primary-blue: #024d72;
	--color-light-bg: #e6edf1;
	--color-dark-bg: #024d72;
	--color-light-ocean-bg: #51abe0;
	--color-primary-red: #b42025;
	--color-secondary-red: #f0d2d3;
	--color-primary-black: #171816;
	--color-sub-header-black: #24272c;
	--color-dark-text: #081e2a;
	--color-light-text: #51abe0;
	--color-muted-text: #5f615e;
	--color-light-border: #c9dbe7;
	--font-inter: "inter";
	--font-outfit: "outfit";
	--font-urbanist: "urbanist";

	/* Responsive Spacing */
	--spacing-section-x: clamp(0px, 10vw, 92px);
	--spacing-section-y: clamp(0px, 10vw, 40px);


	/* breakpoints */
	--breakpoint-xs: 440px;
	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-900: 900px;
	--breakpoint-lg: 1026px;
	--breakpoint-xl: 1280px;
	--breakpoint-2xl: 1440px;
	--breakpoint-3xl: 1600px;
}


/* Override values at breakpoints */
@media (max-width: 900px) {
	@theme {
		--spacing-section-x: 72px;
		--spacing-section-y: 26px;
	}
}

@media (max-width: 480px) {
	@theme {
		--spacing-section-x: 20px;
		--spacing-section-y: 8px;
	}
}