:root {
	--base-primary: #5e6873;
	--base-secondary: #A565F8;
	--base-success: #2CAC6E;
	--base-warning: #D2A400;
	--base-error: #FB5B01;
	--base-neutral: #7f7f7f;
}

:root {

	--background-bg: var(--color-neutral-200);
	--section-bg: var(--color-neutral-100);
	--content-bg: var(--color-neutral-50);

	--bg-highlight: var(--col-yellow);

	--text-color: var(--gray-24);
	--text-sub-color: var(--gray-40);

	--border-color: var(--gray-50);

	--btn-bg-color: var(--color-neutral-50);
	--btn-border-color: var(--color-neutral-300);
	--btn-text-color: var(--color-neutral-900);
	--btn-bg-hover-color: var(--color-neutral-400);

	--border-radius: .25rem;
	--radius: .25rem;

	--accent-color: var(--color-primary-600);
	--accent-text-color: #fff;

	@media (prefers-color-scheme: dark) {
		--background-bg: var(--gray-14);
		--section-bg: var(--gray-12);
		--content-bg: var(--gray-10);

		--bg-highlight: oklch(from var(--col-yellow) 0.70 calc(c + 0.03) h);

		--text-color: var(--gray-80);
		--text-sub-color: var(--gray-60);

		--border-color: var(--gray-30);

		--btn-bg-color: var(--color-neutral-900);
		--btn-border-color: var(--gray-30);
		--btn-text-color: var(--color-neutral-100);
		--btn-bg-hover-color: var(--color-neutral-800);
	}

}

:root[data-theme="light"] {
	--background-bg: var(--color-neutral-200);
	--section-bg: var(--color-neutral-100);
	--content-bg: var(--color-neutral-50);

	--bg-highlight: var(--col-yellow);

	--text-color: var(--gray-24);

	--border-color: var(--gray-50);

	--btn-bg-color: var(--color-neutral-50);
	--btn-border-color: var(--color-neutral-300);
	--btn-text-color: var(--color-neutral-900);
	--btn-bg-hover-color: var(--color-neutral-400);
}

:root[data-theme="dark"] {
	--background-bg: var(--gray-14);
	--section-bg: var(--gray-12);
	--content-bg: var(--gray-10);

	--bg-highlight: oklch(from var(--col-yellow) 0.70 calc(c + 0.03) h);

	--text-color: var(--gray-80);

	--border-color: var(--gray-30);

	--btn-bg-color: var(--color-neutral-900);
	--btn-border-color: var(--gray-30);
	--btn-text-color: var(--color-neutral-100);
	--btn-bg-hover-color: var(--color-neutral-800);
}

:root[data-theme="pink"] {

	--t-bright: 0.23;
	--t-dark: 0.08;
	--kC-bright: 0.18;
	--kC-dark: 0.28;
	--C-max: 0.42;

	--base-primary: #f53893;

	--background-bg: var(--color-primary-200);
	--section-bg: var(--color-primary-100);
	--content-bg: var(--color-primary-50);

	--bg-highlight: oklch(from var(--col-yellow) 0.70 calc(c + 0.03) h);

	--text-color: var(--color-primary-700);

	--border-color: var(--color-primary-400);

	--btn-bg-color: var(--color-primary-500);
	--btn-border-color: var(--color-primary-600);
	--btn-text-color: var(--color-primary-50);
	--btn-bg-hover-color: var(--color-primary-500);
}

:root[data-theme="blue"] {

	--base-primary: #324da6;

	--background-bg: var(--color-primary-200);
	--section-bg: var(--color-primary-100);
	--content-bg: var(--color-primary-50);

	--bg-highlight: oklch(from var(--col-yellow) 0.70 calc(c + 0.03) h);

	--text-color: var(--color-primary-800);

	--border-color: var(--color-primary-600);

	--btn-bg-color: var(--color-primary-600);
	--btn-border-color: var(--color-primary-700);
	--btn-text-color: var(--color-primary-50);
	--btn-bg-hover-color: var(--color-primary-500);
}

:root[data-theme="beige"] {
	--base-primary: #d2b48c;

	--background-bg: var(--color-primary-200);
	--section-bg: var(--color-primary-100);
	--content-bg: var(--color-primary-50);

	--bg-highlight: oklch(from var(--col-yellow) 0.70 calc(c + 0.03) h);

	--text-color: var(--color-primary-800);

	--border-color: var(--color-primary-600);

	--btn-bg-color: var(--color-primary-600);
	--btn-border-color: var(--color-primary-700);
	--btn-text-color: var(--color-primary-100);
	--btn-bg-hover-color: var(--color-primary-600);
}