speed-tester/view/styles/global.css

:root {
	color-scheme: dark;
	scroll-padding-top: 4.5rem;

	--clr-primary: 141, 207, 241;
	--clr-surface-tint: 141, 207, 241;
	--clr-on-primary: 0, 53, 71;
	--clr-primary-container: 0, 77, 102;
	--clr-on-primary-container: 192, 232, 255;
	--clr-secondary: 181, 202, 214;
	--clr-on-secondary: 31, 51, 61;
	--clr-secondary-container: 54, 73, 84;
	--clr-on-secondary-container: 208, 230, 243;
	--clr-tertiary: 200, 194, 234;
	--clr-on-tertiary: 48, 44, 76;
	--clr-tertiary-container: 71, 67, 100;
	--clr-on-tertiary-container: 228, 223, 255;
	--clr-error: 255, 180, 171;
	--clr-on-error: 105, 0, 5;
	--clr-error-container: 147, 0, 10;
	--clr-on-error-container: 255, 218, 214;
	--clr-background: 15, 20, 23;
	--clr-on-background: 223, 227, 231;
	--clr-surface: 15, 20, 23;
	--clr-on-surface: 223, 227, 231;
	--clr-surface-variant: 64, 72, 76;
	--clr-on-surface-variant: 192, 199, 205;
	--clr-outline: 138, 146, 151;
	--clr-outline-variant: 64, 72, 76;
	--clr-shadow: 0, 0, 0;
	--clr-scrim: 0, 0, 0;
	--clr-inverse-surface: 223, 227, 231;
	--clr-inverse-on-surface: 44, 49, 52;
	--clr-inverse-primary: 23, 102, 132;
	--clr-primary-fixed: 192, 232, 255;
	--clr-on-primary-fixed: 0, 30, 43;
	--clr-primary-fixed-dim: 141, 207, 241;
	--clr-on-primary-fixed-variant: 0, 77, 102;
	--clr-secondary-fixed: 208, 230, 243;
	--clr-on-secondary-fixed: 9, 30, 39;
	--clr-secondary-fixed-dim: 181, 202, 214;
	--clr-on-secondary-fixed-variant: 54, 73, 84;
	--clr-tertiary-fixed: 228, 223, 255;
	--clr-on-tertiary-fixed: 27, 23, 54;
	--clr-tertiary-fixed-dim: 200, 194, 234;
	--clr-on-tertiary-fixed-variant: 71, 67, 100;
	--clr-surface-dim: 15, 20, 23;
	--clr-surface-bright: 53, 58, 61;
	--clr-surface-container-lowest: 10, 15, 18;
	--clr-surface-container-low: 23, 28, 31;
	--clr-surface-container: 27, 32, 35;
	--clr-surface-container-high: 38, 43, 46;
	--clr-surface-container-highest: 49, 53, 57;

	--clr-bright: 255, 255, 255;
	--clr-dark: 0, 0, 0;
}

/* light */
:root:has(#theme-switcher:checked) {
	color-scheme: light;

	--clr-primary: 23, 102, 132;
	--clr-surface-tint: 23, 102, 132;
	--clr-on-primary: 255, 255, 255;
	--clr-primary-container: 192, 232, 255;
	--clr-on-primary-container: 0, 30, 43;
	--clr-secondary: 77, 97, 108;
	--clr-on-secondary: 255, 255, 255;
	--clr-secondary-container: 208, 230, 243;
	--clr-on-secondary-container: 9, 30, 39;
	--clr-tertiary: 94, 90, 125;
	--clr-on-tertiary: 255, 255, 255;
	--clr-tertiary-container: 228, 223, 255;
	--clr-on-tertiary-container: 27, 23, 54;
	--clr-error: 186, 26, 26;
	--clr-on-error: 255, 255, 255;
	--clr-error-container: 255, 218, 214;
	--clr-on-error-container: 65, 0, 2;
	--clr-background: 246, 250, 254;
	--clr-on-background: 23, 28, 31;
	--clr-surface: 246, 250, 254;
	--clr-on-surface: 23, 28, 31;
	--clr-surface-variant: 220, 227, 233;
	--clr-on-surface-variant: 64, 72, 76;
	--clr-outline: 113, 120, 125;
	--clr-outline-variant: 192, 199, 205;
	--clr-shadow: 0, 0, 0;
	--clr-scrim: 0, 0, 0;
	--clr-inverse-surface: 44, 49, 52;
	--clr-inverse-on-surface: 237, 241, 245;
	--clr-inverse-primary: 141, 207, 241;
	--clr-primary-fixed: 192, 232, 255;
	--clr-on-primary-fixed: 0, 30, 43;
	--clr-primary-fixed-dim: 141, 207, 241;
	--clr-on-primary-fixed-variant: 0, 77, 102;
	--clr-secondary-fixed: 208, 230, 243;
	--clr-on-secondary-fixed: 9, 30, 39;
	--clr-secondary-fixed-dim: 181, 202, 214;
	--clr-on-secondary-fixed-variant: 54, 73, 84;
	--clr-tertiary-fixed: 228, 223, 255;
	--clr-on-tertiary-fixed: 27, 23, 54;
	--clr-tertiary-fixed-dim: 200, 194, 234;
	--clr-on-tertiary-fixed-variant: 71, 67, 100;
	--clr-surface-dim: 214, 218, 222;
	--clr-surface-bright: 246, 250, 254;
	--clr-surface-container-lowest: 255, 255, 255;
	--clr-surface-container-low: 240, 244, 248;
	--clr-surface-container: 234, 238, 242;
	--clr-surface-container-high: 228, 233, 236;
	--clr-surface-container-highest: 223, 227, 231;

	--clr-bright: 0, 0, 0;
	--clr-dark: 255, 255, 255;
}

:where(*),
*::before,
*::after {
	@apply m-0 box-border min-w-0 p-0;

	font-style: normal;

	-webkit-tap-highlight-color: transparent;

	outline: 2px solid transparent;
}

:focus-visible {
	@apply rounded outline-outline;
}

:-moz-focusring {
	outline-style: solid;
}

/* width */
::-webkit-scrollbar {
	@apply size-2;
}

/* Track */
::-webkit-scrollbar-track {
	@apply bg-primary rounded-lg;
}

/* Handle */
::-webkit-scrollbar-thumb {
	@apply rounded-lg bg-on-primary;
}

body {
	@apply flex flex-col;

	min-height: 100vh;
	min-height: 100svh;

	overflow-x: clip;
}

main {
	@apply grid p-4;

	row-gap: var(--main-gap, 2.5rem);
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-property: none !important;
		transition-duration: none !important;
		transition-timing-function: none !important;
		transition-delay: none !important;
		animation: none !important;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	@apply mb-3 text-balance leading-snug tracking-tighter;
}

h1 {
	@apply text-center text-4xl font-extrabold m:text-6xl;
}
h2 {
	@apply text-2xl font-bold m:text-5xl;
}
h3 {
	@apply text-xl font-semibold m:text-4xl;
}
h4 {
	@apply text-lg font-medium m:text-3xl;
}

button,
label[for],
a:any-link {
	@apply cursor-pointer;
}

a:any-link:hover,
a:any-link:focus-visible {
	color: color-mix(in srgb, currentColor 75%, transparent);
}

section {
	@apply flex flex-col gap-3;
}

p {
	@apply max-w-prose;

	svg {
		display: unset;
	}
}

img,
picture {
	@apply block italic;

	background-repeat: no-repeat;
	background-size: cover;
}

svg,
img,
picture {
	@apply max-h-full max-w-full;
}

:where([hidden]:not(.focusable)) {
	display: none !important;
}

button {
	@apply flex min-w-fit items-center rounded px-4 py-2;

	&.primary {
		@apply bg-primary text-on-primary;
	}

	&.secondary {
		@apply bg-secondary text-on-secondary;
	}
}