/* Общие стили для страницы */
:root {
	--color-blue: oklch(0.5 0.12 243.53);
	--color-red: oklch(0.4 0.18 22.97);
	--color-green: oklch(0.5 0.17 142);
	--color-yellow: oklch(0.9 0.17 96);
	--color-orange: oklch(0.56 0.18 45);
	--color-purple: oklch(0.4 0.15 300);

	--color-black: oklch(0 0 0);
	--color-darker: oklch(0.2 0 0);
	--color-dark: oklch(0.3 0 0);
	--color-gray: oklch(0.5 0 0);
	--color-grayish: oklch(0.8 0 0);
	--color-light: oklch(0.9 0 0);
	--color-lighter: oklch(0.97 0 0);
	--color-white: oklch(1 0 0);

	--button-pseudovolume: 0.05em;
}
body {
	margin: 0;
	display: flex;
	justify-content: center;
	font-family: 'Inter', sans-serif;
	text-rendering: optimizeLegibility;
	line-height: 1.3;
	font-size: 18px;
	min-height: 100vh;
	background-color: var(--color-white);
	color: var(--color-black);
}

* {
	box-sizing: border-box;
	accent-color: var(--color-blue);
}

/* Стили для элементов формы */
input[type="checkbox"] {
	margin-left: 0;
}
button,
input[type="file"] + label {
	--color: var(--color-grayish);

	--top-pct: 85%;
	--bottom-pct: 65%;
	--hover-top-pct: 60%;
	--hover-bottom-pct: 50%;

	--border-pct: 80%;
	--hover-border-pct: 20%;

	--shadow-pct: 70%;
	--shadow-color: color-mix(in srgb, var(--color), #00000035 var(--shadow-pct));

	background-image: linear-gradient(
		color-mix(in oklab, var(--color), var(--color-white) var(--top-pct)),
		color-mix(in oklab, var(--color), var(--color-white) var(--bottom-pct))
	);

	border: 1px solid;
	border-color: color-mix(in srgb, var(--color), var(--color-light) var(--border-pct));
	border-radius: 0.4em;
	padding: 0.33em 1em;
	box-shadow: 0 var(--button-pseudovolume) 0 var(--shadow-color);
	font-size: 1em;
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
	display: block;
	text-wrap: nowrap;
	color: inherit;
	cursor: pointer;
}

button:hover,
button:active,
input[type="file"] + label:hover,
input[type="file"]:active + label  {
	background-image: linear-gradient(
		color-mix(in oklab, var(--color), var(--color-white) var(--hover-top-pct)),
		color-mix(in oklab, var(--color), var(--color-white) var(--hover-bottom-pct))
	);
	border-color: color-mix(in srgb, var(--color), var(--color-light) var(--hover-border-pct));
}

button.blue,
input.blue::file-selector-button {
	--color: var(--color-blue);
	--top-pct: 90%;
	--bottom-pct: 80%;
	--hover-top-pct: 80%;
	--hover-bottom-pct: 70%;
	--border-pct: 80%;
	--hover-border-pct: 70%;
	--shadow-pct: 70%;
}

button:active:not(:disabled):not([disabled]),
input[type="file"]:not(:disabled):not([disabled]):active + label {
	position: relative;
	top: var(--button-pseudovolume);
	box-shadow: none;
}

input[type="file"] {
	display: none;
}

/* Стили для текстовых полей */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
	border: 1px solid var(--color-light);
	padding: 0.33em;
	border-radius: 0.2em;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	background: inherit;
	color: inherit;
}

.disabled * {
	cursor: not-allowed !important;
}

/* Стили для горизонтальной линии */
hr {
	height: 1px;
	border: none;
	background-color: var(--color-grayish);
	opacity: 0.66;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-blue: oklch(0.75 0.12 243.53);
		--color-red: oklch(0.7 0.18 22.97);
		--color-green: oklch(0.7 0.17 142);
		--color-yellow: oklch(0.95 0.17 96);
		--color-orange: oklch(0.7 0.186 47.2);
		--color-purple: oklch(0.7 0.15 300);
		
		--color-white: oklch(0 0 0);
		--color-lighter: oklch(0.2 0 0);
		--color-light: oklch(0.3 0 0);
		--color-grayish: oklch(0.4 0 0);
		--color-gray: oklch(0.5 0 0);
		--color-dark: oklch(0.65 0 0);
		--color-darker: oklch(0.8 0 0);
		--color-black: oklch(1 0 0);
	}
	button,
	input[type="file"] + label {
		--color: var(--color-dark);

		--top-pct: 55%;
		--bottom-pct: 60%;
		--hover-top-pct: 45%;
		--hover-bottom-pct: 50%;

		--border-pct: 90%;
		--hover-border-pct: 75%;
		--shadow-pct: 75%;
	}
	button.blue {
		--top-pct: 40%;
		--bottom-pct: 50%;
		--hover-top-pct: 30%;
		--hover-bottom-pct: 40%;
		
		--border-pct: 60%;
		--hover-border-pct: 50%;
		--shadow-pct: 70%;
	}
	body {
		color: var(--color-black);
		background-color: var(--color-lighter);
		font-weight: 450;
	}
}