:root {
	/* Core Colors - Based on Your Identity */
	--primary: 248 28% 26%; /* #2F3556 - Biru Dongker */
	--primary-foreground: 0 0% 100%;

	--secondary: 332 100% 45%; /* #e60076 - Pink Logo */
	--secondary-foreground: 0 0% 100%;

	--accent: 210 20% 40%; /* Gray Blue untuk balance */
	--accent-foreground: 0 0% 100%;

	/* Neutral Colors */
	--background: 0 0% 100%;
	--foreground: 248 28% 26%; /* Biru Dongker untuk text */

	--muted: 210 20% 96%;
	--muted-foreground: 248 15% 40%;

	--card: 0 0% 100%;
	--card-foreground: 248 28% 26%;

	--popover: 0 0% 100%;
	--popover-foreground: 248 28% 26%;

	/* Additional Brand Colors */
	--navy: 248 28% 26%; /* #2F3556 */
	--navy-light: 248 20% 35%;
	--navy-dark: 248 35% 20%;

	/* Sidebar Colors */
	--sidebar: 248 28% 26%; /* Match primary color */
	--sidebar-foreground: 0 0% 100%;
	--sidebar-border: 0 0% 100% / 0.1;
	--sidebar-accent: 0 0% 100% / 0.1;
	--sidebar-accent-foreground: 0 0% 100%;
	--sidebar-primary: 0 0% 100%;
	--sidebar-primary-foreground: 248 28% 26%;

	--pink: 332 100% 45%; /* #e60076 */
	--pink-light: 332 80% 55%;
	--pink-dark: 332 100% 35%;

	--gray: 210 20% 15%; /* #101828 adjustment */
	--gray-light: 210 10% 40%;

	/* Gradients */
	--gradient-primary: linear-gradient(
		135deg,
		hsl(248 28% 26%) 0%,
		hsl(248 35% 20%) 100%
	);

	--gradient-accent: linear-gradient(
		135deg,
		hsl(332 100% 45%) 0%,
		hsl(332 80% 55%) 100%
	);

	--gradient-hero: linear-gradient(
		135deg,
		hsl(248 35% 20%) 0%,
		hsl(248 28% 26%) 50%,
		hsl(210 20% 40%) 100%
	);

	/* Shadows */
	--shadow-sm: 0 2px 4px rgba(47, 53, 86, 0.05);
	--shadow-md: 0 4px 12px rgba(47, 53, 86, 0.1);
	--shadow-lg: 0 8px 24px rgba(47, 53, 86, 0.15);
	--shadow-pink: 0 4px 16px rgba(230, 0, 118, 0.3);

	/* Rest tetap sama */
	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 0 0% 100%;
	--border: 210 20% 90%;
	--input: 210 20% 90%;
	--ring: 248 28% 26%;
	--radius: 0.75rem;
}