:root {
	/* --- Colors --- */
	--color-brand-500: #15a445;
	--color-brand-400: #73c88f;
	--color-brand-300: #d0edda;
	--color-bg: #f9f9f9;
	--color-bg-alt: #ffffff;
	--color-bg-dark: #141414;
	--color-heading: #0f0e0e;
	--color-text: #383838;
	--color-gray: #878787;
	--color-border: #e9e9e9;
	--color-star: #f6bb06;
	--color-success: #f6bb06;
	--color-error: #ef3b2c;

	/* --- Spacing (100%) --- */
	/* --spacing-5xl: 12.25rem; */
	/* --spacing-4xl: 10rem; */
	/* --spacing-3xl: 8rem; */
	/* Not using i guess (upper) */

	--spacing-section-lg: 12.25vmax;
	--spacing-section-md: 8.5vmax;
	--spacing-section-sm: 6.25vmax;
	/* Custom added (upper) */
	--spacing-3xl: 8rem;
	--spacing-2xl: 6rem;
	--spacing-xl: 4rem;
	--spacing-lg: 3rem;
	--spacing-md: 2rem;
	--spacing-sm: 1.5rem;
	--spacing-xs: 1rem;
	--spacing-2xs: 0.75rem;
	--spacing-3xs: 0.5rem;
	--spacing-4xs: 0.25rem;
	--spacing-5xs: 0.125rem;

	/* --- Typography (Base) --- */
	--fz-4xl: clamp(2rem, 0.8rem + 4vw, 4rem); /* 64px */
	--fz-3xl: clamp(1.875rem, 0.9rem + 3.25vw, 3.5rem); /* 56px */
	--fz-2xl: clamp(1.75rem, 1rem + 2.5vw, 3rem); /* 48px */
	--fz-xl: clamp(1.375rem, 1rem + 1.25vw, 2rem); /* 32px */
	--fz-lg: clamp(1.125rem, 0.9rem + 0.75vw, 1.5rem); /* 24px */
	--fz-md: clamp(1rem, 0.792rem + 0.69vw, 1.125rem); /* 18px */
	--fz-sm: clamp(0.9375rem, 0.833rem + 0.35vw, 1rem); /* 16px */
	--fz-xs: clamp(0.875rem, 0.771rem + 0.35vw, 0.9375rem); /* 15px */

	/* --- Trzeba dodać pozostałe gowno --- */
	--bento-ads-stepper-animation-duration: 6s;

	/* --- Other --- */
	--border-radius-main: 24px;
	--border-radius-sm: 16px;

	/* --- Ecom dashboard --- */
	--ecom-dashboard-box-line-chart-animation-duration: 10s;
	--ecom-dashboard-box-stepper-animation-duration: 6s;
	--ecom-dashboard-box-pie-chart-animation-duration: 12s;
	--ecom-dashboard-box-bar-chart-animation-duration: 16s;

	--ecom-dashboard-box-pie-chart-blue: #3b82f6;
	--ecom-dashboard-box-pie-chart-red: #f43f5e;
	--ecom-dashboard-box-pie-chart-yellow: #eab308;
	--ecom-dashboard-box-pie-chart-purple: #8b5cf6;
}

/* ========================================= */
/* MAX-WIDTH: 1279px (Wrapper) */
/* ========================================= */
@media (max-width: 1279px) {
	:root {
		/* Spacing: ~93.75% */
		--spacing-5xs: 0.1172rem;
		--spacing-4xs: 0.2344rem;
		--spacing-3xs: 0.4688rem;
		--spacing-2xs: 0.7031rem;
		--spacing-xs: 0.9375rem;
		--spacing-sm: 1.4063rem;
		--spacing-md: 1.875rem;
		--spacing-lg: 2.8125rem;
		--spacing-xl: 3.75rem;
		--spacing-2xl: 5.625rem;
		--spacing-3xl: 7.5rem;
		--spacing-4xl: 9.375rem;
		--spacing-5xl: 11.4844rem;
	}
}

/* ========================================= */
/* MAX-WIDTH: 1119px (Tablet Landscape) */
/* ========================================= */
@media (max-width: 1119px) {
	:root {
		/* Spacing: 87.5% */
		--spacing-5xs: 0.1094rem;
		--spacing-4xs: 0.2188rem;
		--spacing-3xs: 0.4375rem;
		--spacing-2xs: 0.6563rem;
		--spacing-xs: 0.875rem;
		--spacing-sm: 1.3125rem;
		--spacing-md: 1.75rem;
		--spacing-lg: 2.625rem;
		--spacing-xl: 3.5rem;
		--spacing-2xl: 5.25rem;
		--spacing-3xl: 7rem;
		--spacing-4xl: 8.75rem;
		--spacing-5xl: 10.7188rem;
	}
}

/* ========================================= */
/* MAX-WIDTH: 1023px (Tablet Portrait) */
/* ========================================= */
@media (max-width: 1023px) {
	:root {
		/* Spacing: ~81.25% */
		--spacing-5xs: 0.1016rem;
		--spacing-4xs: 0.2031rem;
		--spacing-3xs: 0.4063rem;
		--spacing-2xs: 0.6094rem;
		--spacing-xs: 0.8125rem;
		--spacing-sm: 1.2188rem;
		--spacing-md: 1.625rem;
		--spacing-lg: 2.4375rem;
		--spacing-xl: 3.25rem;
		--spacing-2xl: 4.875rem;
		--spacing-3xl: 6.5rem;
		--spacing-4xl: 8.125rem;
		--spacing-5xl: 9.9531rem;
	}
}

/* ========================================= */
/* MAX-WIDTH: 767px (Phone Landscape) */
/* ========================================= */
@media (max-width: 767px) {
	:root {
		/* Spacing: 75% */
		--spacing-5xs: 0.0938rem;
		--spacing-4xs: 0.1875rem;
		--spacing-3xs: 0.375rem;
		--spacing-2xs: 0.5625rem;
		--spacing-xs: 0.75rem;
		--spacing-sm: 1.125rem;
		--spacing-md: 1.5rem;
		--spacing-lg: 2.25rem;
		--spacing-xl: 3rem;
		--spacing-2xl: 4.5rem;
		--spacing-3xl: 6rem;
		--spacing-4xl: 7.5rem;
		--spacing-5xl: 9.1875rem;
	}
}

/* ========================================= */
/* MAX-WIDTH: 479px (Phone Portrait) */
/* ========================================= */
@media (max-width: 479px) {
	:root {
		/* Spacing: 62.5% */
		--spacing-5xs: 0.0781rem;
		--spacing-4xs: 0.1563rem;
		--spacing-3xs: 0.3125rem;
		--spacing-2xs: 0.4688rem;
		--spacing-xs: 0.625rem;
		--spacing-sm: 0.9375rem;
		--spacing-md: 1.25rem;
		--spacing-lg: 1.875rem;
		--spacing-xl: 2.5rem;
		--spacing-2xl: 3.75rem;
		--spacing-3xl: 5rem;
		--spacing-4xl: 6.25rem;
		--spacing-5xl: 7.6563rem;
	}
}