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

@layer utilities {
	.scrollbar-hide {
		-ms-overflow-style: none;
		/* IE and Edge */
		scrollbar-width: none;
		/* Firefox */
	}

	.scrollbar-hide::-webkit-scrollbar {
		display: none;
		/* Chrome, Safari and Opera */
	}
}

.training-scrollbar::-webkit-scrollbar {
	@apply w-1.5;
}

.training-scrollbar::-webkit-scrollbar-track {
	@apply bg-transparent;
}

.training-scrollbar::-webkit-scrollbar-thumb {
	@apply bg-gray-400 hover:bg-gray-500 rounded-full transition-colors opacity-50 hover:opacity-75;
}

.training-scrollbar {
	scrollbar-width: thin;
	scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

:root {
	--max-width: 1100px;
	--border-radius: 12px;
	--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
		"Fira Mono", "Droid Sans Mono", "Courier New", monospace;

	--foreground-rgb: 53, 51, 56;
	--background-start-rgb: 245, 245, 245;
	--background-end-rgb: 245, 245, 245;

	--primary-glow: conic-gradient(from 180deg at 50% 50%, #16abff33 0deg, #0885ff33 55deg, #54d6ff33 120deg, #0071ff33 160deg, transparent 360deg);
	--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));

	--tile-start-rgb: 239, 245, 249;
	--tile-end-rgb: 228, 232, 233;
	--tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);

	--callout-rgb: 238, 240, 241;
	--callout-border-rgb: 172, 175, 176;
	--card-rgb: 180, 185, 188;
	--card-border-rgb: 131, 134, 135;
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

html {
	min-height: 100vh !important;
	height: 100%;
	max-width: 100vw;
	overflow-x: hidden;
	overflow-y: auto;
	font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

body {
	min-height: 100vh !important;
	height: 100%;
	max-width: 100vw;
	overflow-x: hidden;
	font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

body {
	color: rgb(var(--foreground-rgb));
	background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
}

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