p Select a theme option:
input#light(type='radio' name='theme' checked)
label(for='light' data-ico='☀️') light
input#dark(type='radio' name='theme')
label(for='dark' data-ico='🌙') dark

p I am a paragraph with a 
	a(href='#') link
	| .
button: span I am a simple button

$line-w: 2px;

$back-0: #dbdce0; // light theme background
$back-1: #39393c; // dark theme background
$text-0: $back-1; // light theme text
$text-1: $back-0; // dark theme text
$link-0: #573cff; // light theme links + selected toggles
$link-1: #00f1fd; // light theme links + selected toggles

@property --perc {
	syntax: '<length-percentage>';
	initial-value: 0px;
	inherits: true
}

@property --hov {
	syntax: '<number>';
	initial-value: 0;
	inherits: true
}

@property --sel {
	syntax: '<number>';
	initial-value: 0;
	inherits: true
}

* { color: #0000; font: inherit }

body {
	--dark: 0;
	--perc: calc(var(--dark, 0)*100%);
	/* Chrome stabele without flag still needs this fallback */
	--sign: calc(2*var(--dark) - 1);
	--ang: calc(var(--sign)*90deg);
	--full: linear-gradient(red 0 0);
	
	background: 
		linear-gradient(var(--ang), 
				$back-1 var(--perc), $back-0 0) fixed;
	font: 1.5em/ 1.25 sans-serif;
	text-align: center;
	transition: --perc .65s ease-out;
	
	&:has(#dark:checked) { --dark: 1 }
	
	/* if sign() is supported */
	@supports (scale: Sign(-1)) {
		--sign: sign(var(--dark) - .5)
	}
}

p {
	background: 
		linear-gradient(var(--ang), 
				$text-1 var(--perc), $text-0 0) text fixed;
	isolation: isolate
}

:is(a, input):focus { outline: none }

a, button, label {
	--hov: 0;
	transition: --hov .35s ease-out;
	cursor: pointer
}

/* switch --hov to 1 in hover/ focus case */
:is(:hover, :focus), :is(:hover, :focus) + label, label:hover { --hov: 1 }

a {
	position: relative;
	display: inline-block;
	background: 
		linear-gradient(var(--ang), 
				$link-1 var(--perc), $link-0 0) text fixed;
	mix-blend-mode: hard-light;
	
	&::before {
		position: absolute;
		inset: auto 0 0;
		height: 2px;
		background: inherit;
		background-clip: border-box;
		content: ''
	}
}

button {
	border: none;
	padding: .25em .75em;
	border-radius: 1lh;
	background: 
		linear-gradient(var(--ang), 
				$link-1 var(--perc), $link-0 0) fixed;
	
	span {
		background: 
			linear-gradient(var(--ang), 
					$text-0 var(--perc), $text-1 0) text fixed
	}
}

[type='radio'] {
	position: absolute;
	opacity: .001
}

label {
	--sel: 0;
	--perc-sel: calc(var(--sel)*100%);
	--perc-hov: calc(var(--hov)*100%);
	--lght-c: color-mix(in srgb, #{$link-0} var(--perc-sel), #{$text-0});
	--dark-c: color-mix(in srgb, #{$link-1} var(--perc-sel), #{$text-1});
	position: relative;
	margin: .5em;
	padding: calc(.5em + #{$line-w});
	background: 
		linear-gradient(var(--ang), 
				var(--dark-c) var(--perc), var(--lght-c) 0) text fixed;
	transition-property: --hov, --sel;
	
	&::before {
		margin-right: .5em;
		content: attr(data-ico)
	}
	
	/* hover/ focus outline */
	&::after {
		position: absolute;
		inset: 0;
		padding: $line-w;
		background: 
			linear-gradient(var(--ang), 
					color-mix(in srgb, var(--dark-c) var(--perc-hov), #0000) var(--perc), 
					color-mix(in srgb, var(--lght-c) var(--perc-hov), #0000) 0) fixed;
		mask: var(--full) exclude, var(--full) content-box;		
		content: ''
	}
	
	/* switch --sel to 1 if its radio/ checkbox is checked */
	:checked + & { --sel: 1 }
}