/* Generic styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 0 solid;
	background-color: transparent;
}
html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-feature-settings: normal;
	font-variation-settings: normal;
}
input, button {
	font: inherit;
	font-feature-settings: inherit;
	font-variation-settings: inherit;
	font-feature-settings: inherit;
	font-variation-settings: inherit;
	letter-spacing: inherit;
}
button{cursor:pointer}
::placeholder{opacity:1;color:currentColor}
.hidden{display:none}

/* Theme Switcher styles */
#theme {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#theme > svg {
	width: 24px;
	height: 24px;
	stroke: oklch(62.3% 0.214 259.815);
	&:where(.dark *){stroke:oklch(70.7% 0.165 254.624)}
}

#theme > svg > path:first-child {
	fill: color-mix(in oklab, oklch(70.7% 0.165 254.624) 20%, transparent);
}

/* Page styles */
html, body {
	width: 100dvw;
	height: var(--app-height, 100dvh);
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f1f5f9;
	color: #62748e;
	&:where(.dark) {
		background-color: #0f172b;
		color: #90a1b9;
	}
	padding: 48px;
}

.form {
	height: fit-content;
	background-color: white;
	padding: 20px 32px;
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	&:where(.dark *){background-color:#1d293d}
}

h1 {
	font-weight: 700;
	color: black;
	text-align: center;
    font-size: 30px;
    line-height: 1.2;
	font-variant: all-petite-caps;
	user-select: none;
	&:where(.dark *){color:white}
}

input {
	padding: 4px 8px;
	border: 2px solid #cad5e2;
	border-radius: 6px;
	color: #0f172b;
	background-color: white;
	outline: none;
	width: 220px;

	&:focus{border-color:oklch(71.5% 0.143 215.221)}
	&[data-empty=true]{border-color:#fb2c36}
	&:where(.dark *) {
		color: #f1f5f9;
		background-color: #314158;
		border-color: #314158;
		&:focus{border-color:oklch(78.9% 0.154 211.53)}
		&[data-empty=true]{border-color:oklch(80.8% 0.114 19.571)}
	}
}

button[type=submit] {
	color: white;
    border-radius: calc(infinity * 1px);
	margin-inline: auto;
	padding: 8px 20px;
	font-weight: 700;
	background-color: oklch(68.5% 0.169 237.323);

	&:hover{background-color:oklch(74.6% 0.16 232.661)}
	&:disabled{background-color:oklch(58.8% 0.158 241.966)}
	&:where(.dark *) {
		background-color: oklch(58.8% 0.158 241.966);
		&:hover{background-color:oklch(68.5% 0.169 237.323)}
		&:disabled{background-color:oklch(50% 0.134 242.749)}
	}
}

p {
	text-align: center;
	font-weight: 700;
	color: #fb2c36;
	&:where(.dark *){color:oklch(80.8% 0.114 19.571)}
}