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

/* @layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 72.2% 50.6%;
    --destructive-foreground: 0 0% 98%;
    --ring: 0 0% 3.9%;
    --radius: 0.5rem;
	--sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --ring: 0 0% 83.1%;
	--sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
} */

@layer base {
	@font-face {
		font-family: 'Karrik';
		src: url('/fonts/Karrik.woff2');
	}

	@font-face {
		font-family: 'Fira Code';
		src: url('/fonts/FiraCode.woff2');
	}

	:root {
		--gradient: linear-gradient(to top left, hsl(258 85% 67%), hsl(258 60% 40%));

		--background: 255 14.81% 10.59%;
		--foreground: 284 4.7% 97.05%;

		--muted: 258 15% 17%;
		--muted-foreground: 284 4.7% 54.1%;

		--popover: 256.36 14.29% 15.1%;
		--popover-foreground: 284 4.7% 97.05%;

		--card: 256.36 14.29% 15.1%;
		--card-foreground: 284 4.7% 97.05%;

		--border: 258 15% 17%;
		--input: 258 15% 17%;

		--primary: 258 85% 67%;
		--primary-foreground: 284 4.7% 97.05%;

		--secondary: 258 60% 40%;
		--secondary-foreground: 284 4.7% 97.05%;

		--accent: 258 60% 40%;
		--accent-foreground: 284 4.7% 97.05%;

		--destructive: 7 100% 67%;
		--destructive-foreground: 284 4.7% 97.05%;

		--ring: 258 85% 67%;

		--radius: 0.5rem;

    --sidebar-background: 255 14.81% 10.59%;
    --sidebar-foreground:  284 4.7% 97.05%;
    --sidebar-primary: 258 85% 67%;
    --sidebar-primary-foreground: 284 4.7% 97.05%;
    --sidebar-accent: 258 60% 40%;
    --sidebar-accent-foreground: 284 4.7% 97.05%;
    --sidebar-border: 258 15% 17%;
    --sidebar-ring: 258 85% 67%;
	}
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
  ::selection {
		background-color: hsl(var(--primary));
		color: hsl(var(--primary-foreground));
	}

	::-webkit-scrollbar {
		@apply w-2;
		@apply h-2;
	}

	::-webkit-scrollbar-track {
		@apply !bg-muted;
	}

	::-webkit-scrollbar-thumb {
		@apply rounded-sm !bg-muted-foreground/30;
	}

  html {
		scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3);
	}

	.hide-scrollbar::-webkit-scrollbar {
		display: none;
	}

	.hide-scrollbar {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.antialised {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

@layer components {
  .bg-gradient {
    background: var(--gradient);
  }
}