/* 
 * Tailwind CSS Custom Styles
 */

/* Base styles */
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.5;
}

/* Color variables */
:root {
	--color-white: #ffffff;
	--color-black: #000000;
	--color-transparent: rgba(255, 255, 255, 0);
	--color-current: currentColor;
	
	/* Accent colors - Brand Yellow rgb(254, 222, 1) */
	--color-accent-50: #fffef0;
	--color-accent-100: #fffcdb;
	--color-accent-200: #fff8b0;
	--color-accent-300: #fff27a;
	--color-accent-400: #feea3d;
	--color-accent-500: #fede01; /* Brand color: rgb(254, 222, 1) */
	--color-accent-600: #d9b800;
	--color-accent-700: #b38f00;
	--color-accent-800: #8c6e02;
	--color-accent-900: #755b08;
	--color-accent-950: #433400;

	/* Base palette */
	--color-base-50: #f9fafb; /* Very light gray */
	--color-base-100: #f3f4f6; /* Light gray */
	--color-base-200: #e5e7eb; /* Lighter gray */
	--color-base-300: #d1d5db; /* Medium light gray */
	--color-base-400: #9ca3af; /* Medium gray */
	--color-base-500: #6b7280; /* Darker medium gray */
	--color-base-600: #4b5563; /* Dark gray */
	--color-base-700: #374151; /* Darker gray */
	--color-base-800: #1f2937; /* Very dark gray */
	--color-base-900: #111827; /* Almost black */
	--color-base-950: #030712; /* Near black */
	--shadow-hover: rgba(0, 0, 0, 0.137) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.165) 0px 0px 0px 0px;
}

/* Custom utility classes */
.scrollbar-hide {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

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

/* Accent colors */
.bg-accent-50 {
	background-color: var(--color-accent-50);
}
.bg-accent-100 {
	background-color: var(--color-accent-100);
}
.bg-accent-200 {
	background-color: var(--color-accent-200);
}
.bg-accent-300 {
	background-color: var(--color-accent-300);
}
.bg-accent-400 {
	background-color: var(--color-accent-400);
}
.bg-accent-500 {
	background-color: var(--color-accent-500);
}
.bg-accent-600 {
	background-color: var(--color-accent-600);
}
.bg-accent-700 {
	background-color: var(--color-accent-700);
}
.bg-accent-800 {
	background-color: var(--color-accent-800);
}
.bg-accent-900 {
	background-color: var(--color-accent-900);
}
.bg-accent-950 {
	background-color: var(--color-accent-950);
}

.text-accent-50 {
	color: var(--color-accent-50);
}
.text-accent-100 {
	color: var(--color-accent-100);
}
.text-accent-200 {
	color: var(--color-accent-200);
}
.text-accent-300 {
	color: var(--color-accent-300);
}
.text-accent-400 {
	color: var(--color-accent-400);
}
.text-accent-500 {
	color: var(--color-accent-500);
}
.text-accent-600 {
	color: var(--color-accent-600);
}
.text-accent-700 {
	color: var(--color-accent-700);
}
.text-accent-800 {
	color: var(--color-accent-800);
}

/* Add a custom class for brand yellow */
.bg-brand {
	background-color: rgb(254, 222, 1); /* Brand yellow */
}
.text-brand {
	color: rgb(254, 222, 1); /* Brand yellow */
}
.border-brand {
	border-color: rgb(254, 222, 1); /* Brand yellow */
}
.ring-brand {
	--tw-ring-color: rgb(254, 222, 1); /* Brand yellow */
}
.hover\:bg-brand:hover {
	background-color: rgb(254, 222, 1); /* Brand yellow */
}
.hover\:text-brand:hover {
	color: rgb(254, 222, 1); /* Brand yellow */
}
.focus\:ring-brand:focus {
	--tw-ring-color: rgb(254, 222, 1); /* Brand yellow */
}
.text-accent-900 {
	color: var(--color-accent-900);
}
.text-accent-950 {
	color: var(--color-accent-950);
}

/* Base/Gray colors */
.bg-base-50 {
	background-color: var(--color-base-50);
}
.bg-base-100 {
	background-color: var(--color-base-100);
}
.bg-base-200 {
	background-color: var(--color-base-200);
}
.bg-base-300 {
	background-color: var(--color-base-300);
}
.bg-base-400 {
	background-color: var(--color-base-400);
}
.bg-base-500 {
	background-color: var(--color-base-500);
}
.bg-base-600 {
	background-color: var(--color-base-600);
}
.bg-base-700 {
	background-color: var(--color-base-700);
}
.bg-base-800 {
	background-color: var(--color-base-800);
}
.bg-base-900 {
	background-color: var(--color-base-900);
}
.bg-base-950 {
	background-color: var(--color-base-950);
}

.text-base-50 {
	color: var(--color-base-50);
}
.text-base-100 {
	color: var(--color-base-100);
}
.text-base-200 {
	color: var(--color-base-200);
}
.text-base-300 {
	color: var(--color-base-300);
}
.text-base-400 {
	color: var(--color-base-400);
}
.text-base-500 {
	color: var(--color-base-500);
}
.text-base-600 {
	color: var(--color-base-600);
}
.text-base-700 {
	color: var(--color-base-700);
}
.text-base-800 {
	color: var(--color-base-800);
}
.text-base-900 {
	color: var(--color-base-900);
}
.text-base-950 {
	color: var(--color-base-950);
}

/* Border colors */
.border-accent-500 {
	border-color: var(--color-accent-500);
}
.border-base-200 {
	border-color: var(--color-base-200);
}

/* Ring colors */
.ring-accent-500 {
	--tw-ring-color: var(--color-accent-500);
}
.ring-base-200 {
	--tw-ring-color: var(--color-base-200);
}

/* Focus styles */
.focus\:ring-accent-500:focus {
	--tw-ring-color: var(--color-accent-500);
}
.focus-within\:ring-accent-500:focus-within {
	--tw-ring-color: var(--color-accent-500);
}

/* Hover styles */
.hover\:bg-accent-700:hover {
	background-color: var(--color-accent-700);
}
.hover\:text-accent-500:hover {
	color: var(--color-accent-500);
}

/* Custom spacing and sizing utilities */
.aspect-16\/10 {
	aspect-ratio: 16/10;
}

/* Multi-line truncation */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Text balance */
.text-balance {
	text-wrap: balance;
}