/* 
 * Tailwind CSS Custom Styles
 */

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

/* Color variables */
:root {
  /* 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/Gray colors */
  --color-base-50: #f9fafb;
  --color-base-100: #f3f4f6;
  --color-base-200: #e5e7eb;
  --color-base-300: #d1d5db;
  --color-base-400: #9ca3af;
  --color-base-500: #6b7280;
  --color-base-600: #4b5563;
  --color-base-700: #374151;
  --color-base-800: #1f2937;
  --color-base-900: #111827;
  --color-base-950: #030712;
}

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

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

/* Brand color utility class */
.bg-brand {
  background-color: rgb(254, 222, 1) !important; /* Brand yellow */
}
.text-brand {
  color: rgb(254, 222, 1) !important; /* Brand yellow */
}
.border-brand {
  border-color: rgb(254, 222, 1) !important; /* Brand yellow */
}
.ring-brand {
  --tw-ring-color: rgb(254, 222, 1) !important; /* Brand yellow */
}
.hover\:bg-brand:hover {
  background-color: rgb(254, 222, 1) !important; /* Brand yellow */
}
.hover\:text-brand:hover {
  color: rgb(254, 222, 1) !important; /* Brand yellow */
}
.focus\:ring-brand:focus {
  --tw-ring-color: rgb(254, 222, 1) !important; /* Brand yellow */
}

/* 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); }
.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;
}