@import "tailwindcss";
@config "../../tailwind.config.js";
@plugin "tailwindcss-animate";
@custom-variant dark (&:is(.dark *));

@layer base {
	:root {
		/* Main brand colors */
		--primary: 134 57% 22%;
		/* #195a24 - deep green */
		--primary-foreground: 0 0% 98%;
		--secondary: 24 88% 49%;
		/* #ee6d0c - vibrant orange */
		--secondary-foreground: 0 0% 98%;

		/* Standard UI colors */
		--background: 0 0% 100%;
		--foreground: 134 30% 15%;
		/* Darker green for text */
		--card: 0 0% 100%;
		--card-foreground: 134 30% 15%;
		--popover: 0 0% 100%;
		--popover-foreground: 134 30% 15%;
		--muted: 134 10% 95%;
		--muted-foreground: 134 10% 40%;
		--accent: 24 70% 95%;
		/* Light orange */
		--accent-foreground: 24 90% 30%;
		--destructive: 0 84.2% 60.2%;
		--destructive-foreground: 0 0% 98%;
		--border: 134 10% 90%;
		--input: 134 10% 90%;
		--ring: 134 57% 22%;
		/* Green ring */

		/* Chart colors - complementary palette */
		--chart-1: 134 57% 22%;
		/* Green */
		--chart-2: 24 88% 49%;
		/* Orange */
		--chart-3: 197 37% 24%;
		/* Blue-green */
		--chart-4: 45 74% 66%;
		/* Yellow */
		--chart-5: 270 50% 40%;
		/* Purple */

		/* Sidebar specific colors */
		--sidebar-background: 134 10% 98%;
		--sidebar-foreground: 134 30% 15%;
		--sidebar-primary: 134 57% 22%;
		--sidebar-primary-foreground: 0 0% 98%;
		--sidebar-accent: 24 88% 49%;
		--sidebar-accent-foreground: 0 0% 98%;
		--sidebar-border: 134 10% 90%;
		--sidebar-ring: 24 88% 49%;

		/* Border radius */
		--radius: 0.5rem;

		/* Font family variables */
		--font-primary: var(--font-inter);
		--font-secondary: var(--font-poppins);
		--font-serif: var(--font-lora);
		--font-heading: var(--font-montserrat);
		--font-dashboard: var(--font-work-sans);
	}

	.dark {
		/* Dark mode colors with same brand colors */
		--background: 134 30% 8%;
		/* Dark green background */
		--foreground: 0 0% 98%;
		--card: 134 20% 12%;
		--card-foreground: 0 0% 98%;
		--popover: 134 20% 12%;
		--popover-foreground: 0 0% 98%;
		--primary: 134 57% 32%;
		/* Lighter green */
		--primary-foreground: 0 0% 100%;
		--secondary: 24 88% 55%;
		/* Brighter orange */
		--secondary-foreground: 0 0% 98%;
		--muted: 134 15% 15%;
		--muted-foreground: 134 5% 65%;
		--accent: 24 50% 20%;
		--accent-foreground: 24 90% 70%;
		--destructive: 0 62.8% 30.6%;
		--destructive-foreground: 0 0% 98%;
		--border: 134 15% 25%;
		--input: 134 15% 25%;
		--ring: 24 88% 55%;
		/* Orange ring in dark mode */

		/* Chart colors - dark mode variants */
		--chart-1: 134 57% 40%;
		--chart-2: 24 88% 60%;
		--chart-3: 197 37% 40%;
		--chart-4: 45 60% 50%;
		--chart-5: 270 40% 50%;

		/* Sidebar specific colors */
		--sidebar-background: 134 30% 10%;
		--sidebar-foreground: 0 0% 95%;
		--sidebar-primary: 24 88% 55%;
		--sidebar-primary-foreground: 0 0% 100%;
		--sidebar-accent: 134 20% 20%;
		--sidebar-accent-foreground: 0 0% 95%;
		--sidebar-border: 134 15% 25%;
		--sidebar-ring: 24 88% 55%;
	}

	body {
		background-color: hsl(var(--background));
		color: hsl(var(--foreground));
		font-family: var(--font-primary);
	}

	/* Tailwind CSS classes for dropdown items */
	[role="menu"] {

		button,
		a {
			@apply flex h-max p-2 w-full items-start justify-start cursor-pointer;
		}
	}

	img {
		width: auto;
		height: auto;
	}

	/* General purpose font classes */
	.font-primary {
		font-family: var(--font-primary);
	}

	.font-secondary {
		font-family: var(--font-secondary);
	}

	.font-serif {
		font-family: var(--font-serif);
	}

	.font-heading {
		font-family: var(--font-heading);
	}

	.font-dashboard {
		font-family: var(--font-dashboard);
	}

	* {
		@apply border-border;
	}
}

::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-track {
	background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
	background: hsl(var(--primary));
	border-radius: 10px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
}

p,
span {
	font-family: var(--font-secondary);
}

@utility container {
	margin-inline: auto;
	padding-inline: 2rem;
}