@tailwind base;
@tailwind components;
@tailwind utilities;

@import './styles/btn.css';

html {
	min-height: 100%;
	height: auto;
	max-width: 100vw;
}

body {
	min-height: 100vh;
}

body {
	width: 100%;
	height: 100%;
}

[data-sonner-toast] {
	font-family:
		Inter,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		'Open Sans',
		'Helvetica Neue',
		sans-serif;
}

@layer base {
	:root {
		--background: hsla(214, 0%, 100%, 100%);
		--sidebar: hsla(214, 0%, 97%, 100%);

		--typography-strong: hsla(214, 0%, 0%, 100%);
		--typography-strong-dark: hsla(214, 0%, 100%, 100%);
		--typography-weak: hsla(214, 0%, 0%, 78%);
		--typography-weak-dark: hsla(214, 0%, 100%, 78%);
		--hover: hsla(214, 0%, 0%, 6%);
		--fill: hsla(214, 0%, 0%, 2%);
		--fill-solid: hsl(214, 0%, 10%, 100%);
		--fill-hover: hsla(214, 0%, 0%, 2%);
		--stroke-strong: hsla(214, 0%, 0%, 16%);
		--stroke-medium: hsla(214, 0%, 0%, 12%);
		--stroke-weak: hsla(214, 0%, 0%, 9%);

		--secondary: hsl(214, 0%, 97%);
		--secondary-stroke-strong: hsla(214, 0%, 97%, 80%);
		--secondary-stroke-weak: hsla(214, 0%, 97%, 20%);
		--secondary-fill: hsla(214, 0%, 97%, 5%);
		--secondary-typography-strong: hsla(214, 0%, 0%, 100%);
		--secondary-typography-strong-dark: hsla(214, 0%, 100%, 100%);
		--secondary-typography-weak: hsla(214, 0%, 0%, 78%);
		--secondary-typography-weak-dark: hsla(214, 0%, 100%, 78%);

		--brand: hsl(0, 0%, 0%);
		--brand-stroke-strong: hsla(0, 0%, 100%, 80%);
		--brand-stroke-weak: hsla(0, 0%, 100%, 20%);
		--brand-fill: hsla(0, 0%, 100%, 5%);

		--success: hsl(145, 32%, 30%);
		--success-stroke-strong: hsl(145, 32%, 56%);
		--success-stroke-weak: hsl(145, 32%, 75%);
		--success-fill: hsl(145, 32%, 90%);
		--error: hsl(360, 75%, 35%);
		--error-stroke-strong: hsl(360, 75%, 56%);
		--error-stroke-weak: hsl(360, 75%, 80%);
		--error-fill: hsl(360, 75%, 95%);

		--warning: hsl(45, 93%, 43%);
		--warning-stroke-strong: hsl(45, 93%, 56%);
		--warning-stroke-weak: hsl(45, 93%, 80%);
		--warning-fill: hsl(45, 93%, 97%);
		--radius: 0.5rem;
	}

	.dark {
		--brand: hsl(0, 0%, 100%);
		--background: hsla(214, 0%, 8%, 100%);
		--sidebar: hsla(214, 0%, 10%, 100%);
		--typography-strong: hsla(214, 0%, 100%, 100%);
		--typography-weak: hsla(214, 0%, 100%, 78%);
		--hover: hsla(214, 0%, 100%, 6%);
		--fill: hsla(214, 0%, 100%, 2%);
		--fill-solid: hsla(214, 0%, 10%, 100%);
		--fill-hover: hsla(0, 100%, 100%, 3%);
		--stroke-strong: hsla(214, 0%, 100%, 60%);
		--stroke-medium: hsla(214, 0%, 100%, 16%);
		--stroke-weak: hsla(214, 0%, 100%, 8%);

		--success: hsl(145, 32%, 60%);
		--success-stroke-strong: hsl(145, 32%, 36%);
		--success-stroke-weak: hsl(145, 32%, 30%);
		--success-fill: hsl(145, 32%, 14%);

		--error: hsl(360, 75%, 65%);
		--error-stroke-strong: hsl(360, 75%, 56%);
		--error-stroke-weak: hsl(360, 75%, 20%);
		--error-fill: hsl(360, 75%, 11%);

		--warning: hsl(45, 73%, 47%);
		--warning-stroke-strong: hsl(45, 73%, 56%);
		--warning-stroke-weak: hsl(45, 73%, 40%);
		--warning-fill: hsla(45, 93%, 43%, 0.2);
	}

	html {
		@apply !p-0 !overflow-visible;
	}

	h1 {
		@apply text-xl font-bold text-typography-strong;
	}

	h2 {
		@apply scroll-m-20 text-lg font-semibold tracking-tight transition-colors text-typography-strong first:mt-0;
	}

	p {
		@apply text-typography-weak;
	}

	a {
		@apply underline transition-effect text-typography-strong hover:opacity-90;
	}

	ul {
		@apply list-inside list-disc;
	}

	ol {
		@apply list-inside list-decimal space-y-2;
	}

	li {
		@apply text-typography-weak leading-8;
	}

	strong {
		@apply font-bold text-typography-strong;
	}

	span {
		@apply text-typography-weak;
	}

	select {
		@apply text-typography-weak text-sm;
	}

	/* Styling scrollbars with transparent background */
	::-webkit-scrollbar {
		width: 6px; /* Adjust scrollbar width here */
	}
	::-webkit-scrollbar-track {
		background: transparent; /* Remove background color */
	}
	::-webkit-scrollbar-thumb {
		background-color: var(--stroke-strong);
		border-radius: 10px;
		border: 3px solid transparent;
	}
}

@layer utilities {
	.disabled {
		@apply opacity-20 cursor-not-allowed;
	}

	.transition-effect {
		@apply transition duration-200;
	}

	.link-brand {
		@apply text-brand hover:text-brand hover:opacity-80;
	}
}
