$primary: #8358ff;

:root {
	--ebx-slate-50-color: #f4f4f6;
	--ebx-slate-100-color: #e7e8ec;
	--ebx-slate-200-color: #c4c5cf;
	--ebx-slate-300-color: #a1a2b3;
	--ebx-slate-400-color: #7d7f96;
	--ebx-slate-500-color: #5a5d79;
	--ebx-slate-600-color: #363a5d;
	--ebx-slate-700-color: #131740;
	--ebx-slate-800-color: #101436;
	--ebx-slate-900-color: #0d102d;
	--ebx-primary-color: #{$primary};
	--ebx-secondary-color: #ffb31a;
	--ebx-post-link-color: #2f95ef;
	@include defineColorHSL(--ebx-primary-color, 40, 100%, 55%);
	--ebx-primary-rgb: #{hexToRGB($primary)};
	--ebx-dark-color: var(--ebx-slate-700-color);
	--ebx-light-color: var(--ebx-slate-50-color);
	--ebx-background-color: #ffffff;
	--ebx-foreground-color: var(--ebx-slate-700-color);
	--ebx-text-color: var(--ebx-slate-500-color);
	--ebx-border-color: var(--ebx-slate-100-color);
	--ebx-links-color: var(--ebx-primary-color);
	--ebx-links-hover-color: var(--ebx-foreground-color);
	--ebx-woo-color-highlight: #26bb44;

	--ebx-buttons-background-color: #ffb31a;
	--ebx-buttons-text-color: var(--ebx-slate-900-color);
	--ebx-buttons-hover-background-color: transparent;
	--ebx-buttons-hover-border-color: var(--ebx-buttons-background-color);
	--ebx-buttons-hover-text-color: var(--ebx-slate-700-color);

	--ebx-heading-font: "Urbanist", sans-serif;
	--ebx-body-font: "Inter", sans-serif;
	--ebx-heading-font-weight: 700;
	--ebx-button-font-weight: 600;
	--ebx-line-height--sm: 1.1;
	--ebx-font-size--3x-large: 2.25rem;
	--ebx-font-size--2x-large: 2rem;
	--ebx-font-size--x-large: 1.75rem;
	--ebx-font-size--large: 1.5rem;
	--ebx-font-size--medium: 1.25rem;
	--ebx-font-size--2x-small: 0.75rem;
	--ebx-font-size--x-small: 0.9375rem;

	--ebx-h1-size: 2.5rem;
	--ebx-h2-size: 2.125rem;
	--ebx-h3-size: 1.75rem;
	--ebx-h4-size: 1.5rem;
	--ebx-h5-size: 1.25rem;
	--ebx-h6-size: 1.125rem;

	--ebx-transition: cubic-bezier(0.33, 0, 0.25, 1);
	--ebx-transition--all: all 0.3s var(--ebx-transition);
	--ebx-rounded: 1rem;
	--ebx-rounded--xs: 0.25rem;
	--ebx-rounded--sm: 0.5rem;
	--ebx-rounded--md: 0.75rem;
	--ebx-rounded--lg: 1.5rem;
	--ebx-shadow: 0px 4px 6px -4px rgba(13, 16, 45, 0.1),
		0px 10px 15px -3px rgba(13, 16, 45, 0.1);

	--ebx-nav-height: 88px;

	--ebx-container-width--narrow: 840px;
	--ebx-container-width: 1420px;
	--ebx-container-width--wide: 1400px;
}