html,
[data-theme*="light"] {
	--sb-font-headings: "Lexend Variable", Segoe UI, Roboto, sans-serif;
	--sb-font-text: "Inter Variable", Segoe UI, Roboto, sans-serif;
	--sb-font-mono: "JetBrains Mono Variable", Menlo, Consolas, monospace;

	--sb-button-cursor: pointer;
	--sb-background-color: hsl(0, 0%, 100%);
	--sb-heading-color: hsl(240, 6%, 10%);
	--sb-text-color: hsl(240, 5%, 26%);
	--sb-link-underline-color: hsl(199, 95%, 74%);
	--sb-active-link-color: hsl(200, 98%, 39%);
	--sb-code-text-color: hsl(201, 90%, 27%);
	--sb-highlight-background-color: hsl(204, 94%, 95%);
	--sb-decoration-color: hsl(240, 5%, 54%);
	--sb-border-radius: 0.375rem;

	--sb-header-height: 3.5rem;

	--sb-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

	--sb-tint-color: white;
	--sb-tint-color-opposite: black;

	--sb-code-background-color: hsl(0, 0%, 98%);

	--sb-info-background-color: hsl(214, 100%, 97%);
	--sb-info-text-color: hsl(226, 71%, 40%);

	--sb-tip-background-color: hsl(138, 76%, 97%);
	--sb-tip-text-color: hsl(143, 64%, 24%);

	--sb-important-background-color: hsl(250, 100%, 98%);
	--sb-important-text-color: hsl(263, 69%, 42%);

	--sb-warning-background-color: hsl(48, 100%, 96%);
	--sb-warning-text-color: hsl(23, 61%, 38%);

	--sb-danger-background-color: hsl(0, 86%, 97%);
	--sb-danger-text-color: hsl(0, 70%, 35%);

	--sb-hero-background: linear-gradient(
		-45deg,
		hsl(200, 98%, 39%) 50%,
		hsl(199, 95%, 74%) 50%
	);
	--sb-hero-filter: blur(68px);
	--sb-hero-name-background: linear-gradient(
		-20deg,
		hsl(200, 98%, 39%) 30%,
		hsl(199, 95%, 74%)
	);

	--bprogress-color: var(--sb-active-link-color);
}

[data-theme*="dark"] {
	color-scheme: dark;

	--sb-tint-color: black;
	--sb-tint-color-opposite: white;
	--sb-background-color: hsl(240, 6%, 10%);
	--sb-heading-color: hsl(0, 0%, 100%);
	--sb-text-color: hsl(240, 5%, 85%);
	--sb-link-underline-color: hsl(201, 90%, 27%);
	--sb-code-text-color: hsl(199, 95%, 74%);
	--sb-highlight-background-color: hsl(202, 80%, 14%);

	--sb-code-background-color: hsl(240, 4%, 16%);

	--sb-info-background-color: hsl(225, 41%, 17%);
	--sb-info-text-color: hsl(213, 94%, 68%);

	--sb-tip-background-color: hsl(149, 36%, 14%);
	--sb-tip-text-color: hsl(142, 52%, 51%);

	--sb-important-background-color: hsl(263, 44%, 17%);
	--sb-important-text-color: hsl(255, 92%, 76%);

	--sb-warning-background-color: hsl(13, 26%, 13%);
	--sb-warning-text-color: hsl(43, 74%, 50%);

	--sb-danger-background-color: hsl(356, 38%, 16%);
	--sb-danger-text-color: hsl(0, 91%, 71%);
}