:root {
	/* Colors */
	--color-pink: #ff006e;
	--color-pink-light: #f7a8cb;
	--color-hub: #013e29;
	--color-black: #000000;
	--color-gray-border: #d9d9d9;
	--color-gray-text: #989797;
	--color-white: #ffffff;

	/* Typography */
	--font-family: "Raleway", sans-serif;
	--font-family-display: "Unbounded", sans-serif;
	--font-size-base: 16px;
	--line-height-base: 1.4;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--font-size-h1: 35px;
	--font-size-h2: 30px;
	--font-size-h3: 24px;
	--font-size-h4: 20px;
	--font-size-menu: 20px;

	--line-height-heading: 1;
	--heading-margin-bottom: 10px;
	--paragraph-gap: 30px;
	--section-gap: 40px;

	/* Containers (max-width) */
	--container-header: 1410px;
	--container-home: 1140px;
	--container-article: 1260px;

	/* Gutters */
	--gutter: 20px;

	/* Layout */
	--radius-md: 16px;
	--radius-pill: 999px;
	--header-z: 100;
	--header-padding-block: 20px;
	--logo-width: 274px;
	--overlay-backdrop-bg: rgba(0, 0, 0, 0.3);
	--overlay-backdrop-blur: 8px;
	--transition-hover: 0.2s ease;

	/* Breakpoints */
	--bp-desktop: 768px;
	--bp-wide: 1200px;
}

@media (min-width: 1200px) {
	:root {
		--header-padding-block: 25px;
	}
}

@media (min-width: 768px) {
	:root {
		--gutter: 40px;
		--font-size-h1: 35px;
		--font-size-h2: 30px;
		--font-size-h3: 24px;
		--font-size-h4: 20px;
		--paragraph-gap: 30px;
		--section-gap: 40px;
	}
}

@media (max-width: 767px) {
	:root {
		--font-size-h1: 20px;
		--font-size-h2: 19px;
		--font-size-h3: 17px;
		--font-size-h4: 16px;
		--paragraph-gap: 20px;
		--section-gap: 25px;
	}
}