:root {
	--citrus-primary: var(--primary);
	--citrus-secondary: var(--secondary);
	--citrus-light: color-mix(in lch, var(--citrus-primary), var(--light) 70%);
	--citrus-dark: color-mix(in lch, var(--citrus-secondary), var(--dark) 60%);
	--citrus-light-extra: color-mix(in lch, var(--citrus-light), var(--light));
	--citrus-dark-extra: color-mix(in lch, var(--citrus-dark), var(--dark));
	--citrus-mix: color-mix(
		in lch,
		var(--citrus-primary),
		var(--citrus-secondary)
	);
	--citrus-mix-light: color-mix(in lch, var(--citrus-light), var(--citrus-mix));
	--citrus-mix-dark: color-mix(in lch, var(--citrus-dark), var(--citrus-mix));
	--rot-plus: rotate(0.5deg);
	--rot-minus: rotate(-0.5deg);
	--shadow-light: 0.2rem 0.2rem 0.2rem 0.1rem #0002;
	--shadow-heavy: 0.2rem 0.2rem 0.4rem 0.2rem #0004;
	--checker: url("/assets/img/theme/citrus/checker.png");
	--dot: url("/assets/img/theme/citrus/dot.png");
	--lined: url("/assets/img/theme/citrus/line.png");
	--paper: url("/assets/img/theme/citrus/paper.png");
	--noise: url("/assets/img/theme/citrus/imagedoc-lightnoise.png");
	--border: url("/assets/img/theme/citrus/border.png");
	--nav-bg:
		var(--dot),
		linear-gradient(
			var(--citrus-primary),
			var(--citrus-secondary) 60%,
			var(--citrus-primary) 120%
		);
	--button-bg: linear-gradient(
		var(--citrus-primary) 30%,
		var(--citrus-mix) 80%
	);
	--button-border: 2px solid var(--citrus-dark);
	--button-shine:
		inset 0px 2px var(--citrus-light), inset 0px -2px var(--citrus-mix);
	--button-hover-bg: linear-gradient(
		var(--citrus-light),
		var(--citrus-primary),
		var(--citrus-mix-light)
	);
	--button-hover-border: 2px solid var(--citrus-light);
	--button-hover-shine: inset 0 -2px 0 0 var(--citrus-mix);
	--button-current-bg: linear-gradient(
		var(--citrus-mix-dark),
		var(--citrus-dark-extra) 200%
	);
	--button-current-border: 2px solid var(--citrus-dark-extra);
	--button-current-shine:
		inset 0px 2px 0 var(--citrus-mix-light),
		inset 0 -2px 0 var(--citrus-mix-dark);
	--details-bg: linear-gradient(
		-45deg,
		var(--citrus-primary),
		var(--citrus-mix),
		var(--citrus-primary)
	);
	--details-shine:
		inset 0 2px 0 var(--citrus-light-extra), inset 2px 0 0 var(--citrus-light),
		inset 0 -2px 0 var(--citrus-primary), inset -2px 0 0 var(--citrus-primary);
	--details-border: 2px solid var(--citrus-dark);
}