/* ----------------  */
/* Fonts             */
/* ----------------  */

@font-face {
	font-display: swap;
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 400;
	src: url('./assets/fonts/space-mono-v17-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 700;
	src: url('./assets/fonts/space-mono-v17-latin-700.woff2') format('woff2');
}

/* ----------------  */
/* Custom Properties */
/* ----------------  */

:root {
	--theme-mode: light;

	--clr-neutral-900: 220 40% 13%;
	--clr-neutral-800: 222 41% 20%;
	--clr-neutral-700: 217 21% 21%;
	--clr-neutral-500: 217 35% 45%;
	--clr-neutral-300: 217 20% 51%;
	--clr-neutral-200: 222 44% 70%;
	--clr-neutral-100: 227 100% 98%;
	--clr-neutral-0: 0 0% 100%;

	--clr-blue-500: 212 100% 50%;
	--clr-blue-300: 212 100% 69%;
	--clr-red-500: 0 92% 62%;

	/* Semantic Roles — NO hsl() wrapper here */
	--clr-primary: var(--clr-blue-500);
	--clr-secondary: var(--clr-neutral-700);
	--clr-background: var(--clr-neutral-100);
	--clr-section-background: var(--clr-neutral-0);
	--clr-text: var(--clr-neutral-500);
	--clr-text-muted: var(--clr-neutral-200);
	--clr-text-light: var(--clr-neutral-100);
	--clr-text-title: var(--clr-neutral-900);
	--clr-error: var(--clr-red-500);
	--radio-color: var(--clr-neutral-500);

	--fs-900: 1.625rem;
	--fs-800: 1.375rem;
	--fs-700: 0.8125rem;
	--fs-600: 1rem;
	--fs-500: 1rem;
	--fs-400: 0.9375rem;
	--fs-300: 0.8125rem;
	--fs-200: 0.8125rem;

	--ff-sans-normal: 'Space Mono', monospace;
	--fw-700: 700;
	--fw-400: 400;
}

.dark {
	--theme-mode: dark;
}

:root[style*='--theme-mode: dark'] {
	--clr-primary: var(--clr-blue-500);
	--clr-secondary: var(--clr-neutral-0);
	--clr-background: var(--clr-neutral-900);
	--clr-section-background: var(--clr-neutral-800);
	--clr-text: var(--clr-neutral-0);
	--clr-text-muted: var(--clr-neutral-200);
	--clr-text-light: var(--clr-neutral-100);
	--clr-text-title: var(--clr-neutral-0);
	--clr-error: var(--clr-red-500);
	--radio-color: var(--clr-neutral-900);
}

/* ----------------  */
/* Reset             */
/* ----------------  */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
picture {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	font-weight: var(--fs-400);
}

a {
	text-decoration: none;
	color: inherit;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body {
	font-family: var(--ff-sans-normal);
	font-size: var(--fs-400);
	background-color: hsl(var(--clr-background));
	color: hsl(var(--clr-text));
	line-height: 1.5;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding-block: clamp(1rem, 2vw, 2.5rem);
}

img,
picture {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

input[type='search'] {
	appearance: none;
	background-color: hsl(var(--clr-section-background));
}

/* this should remove the x in Safari */
input[type='search']:not(:focus, :active)::-webkit-search-cancel-button {
	display: none;
}

input[type='radio'] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(100%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -----------------  */
/* Utility Classes    */
/* -----------------  */

/* General */

.wrapper {
	margin-inline: auto;
	width: min(calc(100vw - 2rem), 45.6rem);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Color */

.clr-primary {
	color: hsl(var(--clr-primary));
}

.clr-secondary {
	color: hsl(var(--clr-secondary));
}

.clr-text {
	color: hsl(var(--clr-text));
}

.clr-text-title {
	color: hsl(var(--clr-text-title));
}

.opacity-75 {
	opacity: 0.75;
}

/* Typography */

.letter-spacing-1 {
	letter-spacing: 2.5px;
}

.uppercase {
	text-transform: uppercase;
}

.fs-900 {
	font-size: var(--fs-900);
	line-height: 1.2;
}
.fs-800 {
	font-size: var(--fs-800);
}
.fs-700 {
	font-size: var(--fs-700);
}
.fs-600 {
	font-size: var(--fs-600);
}
.fs-500 {
	font-size: var(--fs-500);
}
.fs-400 {
	font-size: var(--fs-400);
}
.fs-300 {
	font-size: var(--fs-300);
}
.fs-200 {
	font-size: var(--fs-200);
}

.fs-800,
.fs-700,
.fs-200 {
	line-height: 1.4;
}

.fs-600,
.fs-500,
.fs-400,
.fs-300 {
	line-height: 1.5;
}

.fw-700 {
	font-weight: var(--fw-700);
}

.fw-400 {
	font-weight: var(--fw-400);
}

/* ----------------  */
/* Layout            */
/* ----------------  */

section {
	background-color: hsl(var(--clr-section-background));
	margin-block-start: 2rem;
	padding: 2rem 1.5rem;
	border-radius: 15px;
}

.github-card {
	background-color: hsl(var(--clr-section-background));
	padding: 2rem 1.5rem;
	border-radius: 15px;
	display: grid;
	grid-template-columns: 70px 1fr;
	grid-template-areas:
		'avatar header'
		'bio bio'
		'stats stats'
		'meta meta';
	gap: 1.5rem;
}

.user-avatar {
	width: 4.375rem;
	height: 4.375rem;
	border-radius: 50%;
}

.card-header {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.user-main {
	display: flex;
	align-items: flex-start;
	width: 100%;
	flex-direction: column;
	gap: 0.25rem;

	@media (min-width: 41.25rem) {
		flex-direction: row;
	}
}

.user-credits {
	display: flex;
	flex-direction: column;
	font-size: var(--fs-900);
	font-weight: var(--fw-700);
	color: hsl(var(--clr-secondary));
}

.username {
	color: hsl(var(--clr-primary));
	font-size: var(--fs-600);
	font-weight: var(--fw-400);
}

.user-bio {
	max-width: 60ch;
	grid-area: bio;
}

@media (min-width: 41.25rem) {
	.github-card {
		grid-template-columns: 117px 1fr;
		grid-template-rows: auto auto auto auto;
		gap: 2rem;
		grid-template-areas:
			'avatar header'
			'avatar bio'
			'avatar stats'
			'avatar meta';
	}

	.user-avatar {
		width: 117px;
		height: 117px;
		grid-area: avatar;
	}

	.joined {
		margin-inline-start: auto;
	}
}

.user-stats {
	background-color: hsl(var(--clr-background));
	border-radius: 10px;
	margin: 0;
	padding: 1rem 1.25rem;
	display: grid;
	gap: 1rem;
	grid-area: stats;
}

dt {
	font-size: var(--fs-300);
	color: var(--clr-text);
}

dd {
	font-size: var(--fs-800);
	font-weight: var(--fw-700);
	color: hsl(var(--clr-secondary));
	margin: 0;
}

.user-meta {
	display: grid;
	gap: 1rem;
	grid-area: meta;
}

@media (min-width: 30rem) {
	.user-stats {
		padding: 1rem 2rem;
		grid-template-columns: repeat(3, 1fr);
	}

	.user-meta {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ----------------  */
/* Components */
/* ----------------  */

header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Theme Toggle */

.color-picker > fieldset {
	border: 0;
	display: flex;
	gap: 2rem;
	width: fit-content;
	margin-inline: auto;
	padding: 0;
}

.color-picker input[type='radio'] {
	appearance: none;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	outline: 3px solid var(--radio-color, currentColor);
	outline-offset: 3px;
	position: relative;
	cursor: pointer;

	&:checked {
		background-color: var(--radio-color, currentColor);
	}
}

input[type='radio'][data-theme='dark'] {
	--radio-color: hsl(var(--clr-neutral-900));
}

input[type='radio'][data-theme='light'] {
	--radio-color: hsl(var(--clr-neutral-500));
}

:root:has(#dark:checked),
.dark {
	--theme-mode: dark;
}

.theme-toggle {
	background-color: transparent;
	border: none;
	display: flex;
	align-items: center;
	gap: 1rem;
	text-transform: uppercase;
	color: hsl(var(--clr-text));
	font-size: var(--fs-200);
	font-weight: var(--fw-700);
	letter-spacing: 2.5px;
	cursor: pointer;
	touch-action: manipulation;
	outline-offset: 5px;

	& > svg {
		inline-size: 100%;
		block-size: 100%;
	}
}

/* Button */

.btn {
	cursor: pointer;
	border-radius: 10px;
	background-color: hsl(var(--clr-blue-500));
	color: hsl(var(--clr-neutral-0));
	border: 1px solid transparent;
	font-size: var(--fs-500);
	font-weight: var(--fw-700);
	padding: 0.5rem 1.25rem;

	@media (min-width: 30rem) {
		padding: 0.75rem 1.5rem;
	}

	&:hover,
	&:focus {
		background-color: hsl(var(--clr-blue-300));
		outline: none;
	}
}

/* Search Form */
.search-form {
	position: relative;
	width: calc(100% - 8px);
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: clamp(0.5rem, 2vw, 0.75rem);
	padding: clamp(0.5rem, 2vw, 0.75rem);
	background-color: hsl(var(--clr-section-background));
	border-radius: 16px;
	margin-block-start: 2rem;
	box-shadow: 0 16px 30px -10px hsla(227, 46%, 51%, 0.2);

	&:focus-within {
		outline: 2px solid hsl(var(--clr-blue-500));
		outline-offset: 4px;
	}
}

.search-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.search-input {
	border: none;
	outline: none;
	font-size: var(--fs-700);
	color: hsl(var(--clr-text));

	&::placeholder {
		font-size: var(--fs-700);
		color: hsl(var(--clr-text));
	}
}

.dark .search-input::placeholder {
	opacity: 0.75;
}

.error {
	display: none;
	color: hsl(var(--clr-red-500));
	font-size: var(--fs-500);
	font-weight: var(--fw-700);
	position: absolute;
	opacity: 100%;
	top: 1rem;
	right: 130px;

	@media (min-width: 30rem) {
		transform: translateY(25%);
	}
}