/* Setup */

/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); */

:root {
	--color-brand: hsl(204 88% 53%);
	--color-text-primary: hsl(0 0% 98%);
	--color-text-muted: hsl(210 34% 80%);
	--color-bg-primary: hsl(210 34% 13%);
	--color-bg-secondary: hsl(209, 35%, 15%);
	--color-btn-primary-active: var(--color-brand);
	--color-btn-primary-active-hover: hsl(204 88% 60%);
	--color-btn-primary-inactive: hsl(205 70% 33%);
	--color-btn-secondary: hsl(192 19% 95%);
	--color-border-primary: hsl(0, 0%, 34%);
	--color-link-hover: hsl(209 22% 19%);
	--color-placeholder: hsl(210 34% 80%);
	--clr-input-txt: hsl(177 100% 15%);

	--red: #990000;
	--tomatoOrange: hsla(0, 75%, 60%, 1);
	--redBrown: #633539;
	--blue: #336699;
	--black: #1f273a;
	--white: #fff;
	--grey: #efefef;
	--greyBlue: hsla(222, 9%, 57%, 1);
	--lighterGreyBlue: #6a707e;
	--yellow: #ffc600;
	--light: #ffffff;
	--dark: #000000;
	--lightGrey: #c5c5c5;
	--lightGray: var(--lightGrey);
	--imGoingToFaint: #fbfbfb;
	--redBrown: #633539;
	--maxWidth: 1200px;

	/* Define Colors intentions */
	--primary: var(--greyBlue);
	--secondary: var(--redBrown);
	--background: var(--white);
	--textColor: var(--lighterGreyBlue);
	--buttonTextColor: var(--white);
	--lineColor: var(--grey);
	--cardBg: var(--darkGrey);
	--headerBackground: var(--greyBlue);
	--footerBackground: var(--darkGrey);
	--linkHover: var(--white);
	--lightHairLine: #c5c5c5;

	--radius-base: 1rem;

	/* Type */
	--headingFont: 'Merriweather Sans', sans-serif;
	--bodyFont: 'Work Sans', sans-serif;
	--baseFontSize: 100%;
	--h1: 3.052rem;
	--h2: 2.441rem;
	--h3: 1.953rem;
	--h4: 1.563rem;
	--h5: 1.25rem;
	--h6: 1.8rem;
	--bodyTextSize: 1.8rem;
	--smallText: 1.44rem;
	--lineHeight: 2.25rem;
	--font-serif: 'Inter', sans-serif;
	--font-16: 1.6rem;
	--font-18: 1.8rem;
	--font-24: 2.4rem;
	--font-32: 3.2rem;
	--font-80: 8rem;

	--spacing-4: 0.4rem;
	--spacing-8: 0.5rem;
	--spacing-16: 1.6rem;
	--spacing-20: 2rem;
	--spacing-24: 2.4rem;
	--spacing-32: 3.2rem;

	/* Elevation */
	--level-0: none;
	--level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* Z Indexes */
	--zBase: 1;

	/* Positioning */
	--containerPadding: 2.5%;
	--headerHeight: 8rem;
	--borderRadius: 4px;
	--borderRadiusLarge: 10px;
	--maxWidth: 1200px;

	/* Font */
	--font-sans: 'Poppins', sans-serif;
	--font-serif: 'Arsenica', serif;
	--font-mono: Source Code Pro, monospace;
	--font-dyslexic: OpenDyslexic, sans-serif;
	--font-dyslexic-mono: OpenDyslexic Mono, monospace;

	--font-16: 1.6rem;
	--font-24: 2.4rem;
	--font-32: 3.2rem;
	--font-48: 4.8rem;
	--font-96: 9.6rem;

	/* Spacing */
	--spacing-4: 0.4rem;
	--spacing-8: 0.8rem;
	--spacing-16: 1.6rem;
	--spacing-24: 2.4rem;
	--spacing-32: 3.2rem;
	--spacing-64: 6.4rem;
	--spacing-128: 12.8rem;

	/* Scrollbar */
	--clr-scrollbar-thumb: hsl(173 10% 20%);

	/* Shadows */
	--shadow-sm: 0px 0px 4px 4px hsl(0 0% 0% / 4%);
	--shadow-md: 0px 0px 10px 4px hsl(0 0% 0% / 10%);
	--shadow-lg: 0px 0px 20px 8px hsl(0 0% 0% / 20%);

	/* Border radius */
	--rounded-4: 4px;
	--rounded-20: 20px;

	--toast-background: var(--color-brand);
	--toast-error-background: var(--tomatoOrange);

	/* Media Queryies - Not yet supported in CSS */
	/*
      --xsmall: 340px;
      --small: 500px;
      --large: 960px;
      --wide: 1200px;
    */

	/* Light Theme Default */
	/* Global */
	--clr-primary: hsl(220 100% 50%);
	--clr-txt: hsl(220 10% 10%);
	--clr-bg: hsl(0 0% 98%);

	--bg: radial-gradient(hsl(0 0% 98%), var(--clr-bg));
	--bg-opacity: 0.7;

	/* Menu */
	--clr-menu-text: hsl(220 10% 10%);
	--clr-menu-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
	--clr-menu-arrow-bg: hsl(0 0% 98%);
	--clr-menu-border: hsl(0 0% 80%);

	--clr-theme-txt: hsl(0 0% 98%);
	--clr-theme-active: hsl(220 100% 60%);
	--clr-switch-on-bg: hsl(220 40% 90%);
	--clr-switch-off-bg: hsl(220 40% 80%);

	/* Hero */
	--clr-hero-txt: hsl(220 10% 40%);
	--clr-hero-bg: linear-gradient(270deg, hsl(0 0% 94%) 43%, hsl(0 0% 98%) 66%);
	--clr-hero-divider-bg: hsl(0 0% 80%);
	--clr-input-txt: hsl(220 10% 98%);
	--clr-input-bg: hsl(0 0% 98%);
	--clr-input-placeholder-txt: hsl(220 10% 60%);
	--clr-input-border: hsl(0 0% 80%);

	/* Card */
	--clr-card-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
	--clr-card-txt: hsl(220 10% 40%);

	/* Link */
	--clr-link-txt: hsl(220 10% 10%);
	--clr-link-background: hsl(0 0% 100%);

	/* Footer */
	--clr-footer-txt: hsl(220 10% 10%);
	--clr-footer-bg: hsl(0 0% 98%);

	/* Post */
	--post-overlay-bg: radial-gradient(hsl(0 0% 100% / 60%), var(--clr-bg));
	--post-blockquote-txt: hsl(0 0% 40%);
	--post-blockquote-bg: hsl(0 0% 98%);
	--post-blockquote-border: hsl(0 0% 84%);

	--clr-code-bg: hsl(0 0% 98%);
	--clr-code-title: hsl(0 0% 40%);
	--clr-code-border: hsl(0 0% 84%);
	--clr-code-line-number: hsl(0 0% 60%);
	--clr-code-line-highlight: hsl(0 0% 94%);
	--clr-code-inline-txt: hsl(0 0% 98%);
	--clr-code-inline-bg: hsl(0 0% 20%);

	--clr-token-1: hsl(220 100% 50%);
	--clr-token-2: hsl(220 60% 50%);
	--clr-token-3: hsl(220 100% 50%);
	--clr-token-4: hsl(0 0% 20%);
	--clr-token-5: hsl(0 0% 60%);

	/* Input Fields */
	--input-bg: #181a1b;
}

html {
	width: 100%;
	font-size: 62.5%;
	box-sizing: border-box;
}

body {
	color: var(--primary);
	padding: 0;
	margin: 0;
	font-size: var(--bodyTextSize);
}

html {
	font-size: 62.5%;
	box-sizing: border-box;
	scrollbar-width: thin;
}

html,
body {
	height: 100%;
}

::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

::-webkit-scrollbar-track {
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: var(--color-brand);
	border-radius: var(--radius-base);
}

::selection {
	background: var(--primary);
	color: var(--white);
}

body {
	font-family: var(--font-serif);
	font-size: var(--font-16);
	color: var(--clr-txt);
	background-color: var(--clr-bg);
	opacity: var(--bg-opacity);
}

a {
	text-decoration: none;
	color: var(--clr-txt);
}

fieldset {
	border: 0;
	border-radius: 4px;
	padding: 0;

	&[disabled] {
		opacity: 0.5;
	}
}

label {
	display: block;
	margin: var(--spacing-8) 0;
	font-size: var(--font-24);
	color: var(--clr-txt);
}

input {
	padding: var(--spacing-8);
	font-size: var(--font-16);
	border-radius: var(--radius-base);
	background-color: var(--clr-input-bg);
	border: solid 2px var(--clr-theme-active);

	&:focus {
		outline: 0;
		border-color: var(--clr-primary);
	}
}

.btn {
	padding: var(--spacing-4) var(--spacing-8);
	font-size: var(--font-18);
	font-weight: bold;
	color: var(--color-text-primary);
	background-color: var(--color-btn-primary-active);
	border-radius: var(--radius-base);
	border: none;
	cursor: pointer;
}

.btn:hover {
	background-color: var(--color-btn-primary-active-hover);
}

.btn:disabled {
	color: var(--color-text-muted);
	background-color: var(--color-btn-primary-inactive);
	cursor: not-allowed;
}

.remove {
	background-color: var(--warning);

	&:hover {
		background-color: var(--warning-hover);
	}
}

ul,
ol {
	list-style: none;
}

/* Utils */

.responsive {
	resize: both;
	overflow: scroll;
	border: 1px solid hsl(0 0% 0%);
}

.placeholder {
	padding: var(--spacing-20) 0;
	background-color: var(--color-placeholder);
	border-radius: var(--radius-base);
}

.icon {
	width: 24px;
	height: 24px;
}

.center {
	text-align: center;
}

.error {
	margin: 1rem;
	padding: 0.5rem;
	border-radius: var(--borderRadius);
	background-color: var(--tomatoOrange);
	font-weight: 700;
}

/* Base Dialog Styles */
.dialog {
	display: grid;
	gap: 1.5rem;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 101;
	border-radius: 10px;
	background-color: var(--clr-input-bg);
	padding: 2rem;
	min-width: 400px;

	.dialog-footer {
		display: flex;
		justify-content: space-between;
		gap: 2rem;
		margin: 1rem 0;

		button {
			display: flex;
			place-content: center;
			gap: 1rem;
			width: 100%;
			border-radius: 10px;
			padding: 1rem;
			background-color: var(--color-btn-primary-active);

			&:hover {
				background-color: var(--color-btn-primary-active-hover);
			}
		}

		.remove {
			background-color: var(--warning);

			&:hover {
				background-color: var(--warning-hover);
			}
		}
	}
}
