@property --theme-a {
	syntax: '<color>';
	inherits: true;
	initial-value: #33c5f4;
}
@property --theme-b {
	syntax: '<color>';
	inherits: true;
	initial-value: #913bff;
}
@property --angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

:root {
	--font-a: 'Fredoka', system-ui, sans-serif;
	--font-b: 'Caveat', system-ui, sans-serif;
	--font-mono: Monaspace, Fira Code, Menlo, Courier New, monospace;

	/* --font: clamp(0.75rem, calc(0.75rem + 1vw), 1.1rem); */
	--font: 1.1rem;
	--font-sm: clamp(10px, calc(8px + 1vw), 14px);
	--font-xs: clamp(12px, calc(6px + 1vw), 14px);
	--line-height-sm: clamp(1rem, calc(0.5rem + 1vw), 1.2rem);

	--bg-a: black;
	--bg-b: #0b0d12;
	--bg-c: #1a1e24;
	--bg-d: #2a2f36;

	--fg-a: #f5f5f5;
	--fg-b: #e0e0e0;
	--fg-c: #c6c6c6;
	--fg-d: #a8a8a8;

	--outline: 1px solid #fff3;
	--radius: 0.5rem;
	--gradient: linear-gradient(
		in lab var(--deg, 45deg),
		var(--theme-a, #33c5f4),
		var(--theme-b, #a269cb)
	);
	/* prettier-ignore */
	--ps-gradient: linear-gradient(
		in lab var(--deg, 45deg),
		#913bff, 
		#f44d4d
	);
	/* prettier-ignore */
	--shadow: 0rem 0.0469rem 0.0625rem rgb(0, 0, 0, 0.115),
        0rem 0.1563rem 0.125rem hsla(0, 0%, 0%, 0.075),
        0rem 0.2813rem 0.1875rem hsla(0, 0%, 0%, 0.025),
        0rem 0.3125rem 0.3125rem hsla(0, 0%, 0%, 0.05),
        0rem 0.625rem 0.625rem hsla(0, 0%, 0%, 0.145),
        0rem 0.625rem 1.25rem hsla(0, 0%, 0%, 0.15);
}
