.inverted {
	color-scheme: dark;

	@media (--dark) {
		color-scheme: light;
	}
}

.dark {
	color-scheme: dark;
}

.light {
	color-scheme: light;
}

.high-contrast {
	--neutral: oklch(30% 0 300deg);
	--primary: oklch(30% 0.36 250deg);
	--secondary: oklch(85% 0.36 250deg);
	--color-text: light-dark(black, white);
	--color-bg: light-dark(white, oklch(from var(--neutral) 10% c h));
	--color-bg-dark: light-dark(
		oklch(from var(--neutral) var(--50)),
		oklch(from var(--neutral) var(--800))
	);
	--color-accent: light-dark(
		oklch(from var(--primary) var(--700)),
		oklch(from var(--primary) var(--200))
	);
	--color-link: light-dark(
		oklch(from var(--secondary) var(--500)),
		oklch(from var(--secondary) var(--200))
	);
	--color-border: light-dark(
		oklch(from var(--neutral) var(--700)),
		oklch(from var(--neutral) var(--200))
	);
}

.low-contrast {
	--neutral: oklch(30% 0.04 300deg);
	--primary: oklch(30% 0.04 300deg);
	--secondary: oklch(60% 0.04 200deg);
	--color-text: light-dark(
		oklch(from var(--primary) var(--500)),
		oklch(from var(--primary) var(--300))
	);
	--color-bg: light-dark(
		oklch(from var(--primary) var(--100)),
		oklch(from var(--primary) var(--800))
	);
	--color-bg-dark: light-dark(
		oklch(from var(--neutral) 92% calc(c / 3) h),
		oklch(from var(--primary) 20% calc(c / 2) h)
	);
	--color-accent: light-dark(
		oklch(from var(--primary) var(--400)),
		oklch(from var(--primary) var(--400))
	);
	--color-link: light-dark(
		oklch(from var(--secondary) var(--500)),
		oklch(from var(--secondary) var(--300))
	);
	--color-border: light-dark(
		oklch(from var(--neutral) var(--200)),
		oklch(from var(--neutral) var(--700))
	);
}

.primary {
	--neutral: oklch(30% 0.2 300deg);
	--primary: oklch(20% 0.2 300deg);
	--secondary: oklch(70% 0.2 300deg);
	--color-text: light-dark(
		oklch(from var(--primary) var(--700)),
		oklch(from var(--primary) var(--50))
	);
	--color-bg: light-dark(
		oklch(from var(--primary) var(--100)),
		oklch(from var(--primary) var(--800))
	);
	--color-bg-dark: light-dark(
		oklch(from var(--primary) var(--50)),
		oklch(from var(--primary) var(--900))
	);
	--color-accent: light-dark(
		oklch(from var(--primary) var(--500)),
		oklch(from var(--primary) var(--300))
	);
	--color-link: light-dark(
		oklch(from var(--secondary) var(--500)),
		oklch(from var(--secondary) var(--200))
	);
	--color-border: light-dark(
		oklch(from var(--neutral) var(--200)),
		oklch(from var(--neutral) var(--600))
	);
}

.secondary {
	--h: 210;
	--neutral: oklch(30% 0.15 var(--h));
	--primary: oklch(20% 0.15 var(--h));
	--secondary: oklch(70% 0.15 var(--h));
	--color-text: light-dark(
		oklch(from var(--primary) var(--700)),
		oklch(from var(--primary) var(--50))
	);
	--color-bg: light-dark(
		oklch(from var(--primary) var(--100)),
		oklch(from var(--primary) var(--700))
	);
	--color-bg-dark: light-dark(
		oklch(from var(--primary) var(--50)),
		oklch(from var(--primary) var(--800))
	);
	--color-accent: light-dark(
		oklch(from var(--primary) var(--500)),
		oklch(from var(--primary) var(--300))
	);
	--color-link: light-dark(
		oklch(from var(--secondary) var(--400)),
		oklch(from var(--secondary) var(--200))
	);
	--color-border: light-dark(
		oklch(from var(--neutral) var(--300)),
		oklch(from var(--neutral) var(--900))
	);
}
