/* 
Theme Colors - CSS Custom Properties for Entity Types
Replaces hard-coded hex colors with maintainable CSS variables

Usage in templates via Tailwind classes:
- text-blue-500 (user entities)  
- text-green-500 (quest entities)
- text-red-500 (collection entities)
- text-dark-500 (brand entities)
- text-neutral-500 (fallback)

Entity type color mapping:
- user: blue theme (#589ad7, #2C72B5)
- brand/brand_review: dark theme (#6b7280, #374151) 
- quest/quest_item: green theme (#86b086, #598859)
- collection/collection_item: red theme (#cd826b, #B65A3E)
- fallback: neutral gray theme
*/

:root {
  /* User Theme (Blue) */
  --blue-500: #589ad7;
  --blue-700: #2C72B5;
  
  /* Brand Theme (Dark Gray) */
  --dark-500: #6b7280;
  --dark-700: #374151;
  
  /* Quest Theme (Green) */
  --green-500: #86b086;
  --green-700: #598859;
  
  /* Collection Theme (Red/Orange) */
  --red-500: #cd826b;
  --red-700: #B65A3E;
  
  /* Neutral Fallback Theme */
  --neutral-500: #6b7280;
  --neutral-700: #374151;
}

/* Utility classes for theme colors */
.text-blue-500 { color: var(--blue-500) !important; }
.text-blue-700 { color: var(--blue-700) !important; }
.hover\:text-blue-700:hover { color: var(--blue-700) !important; }

.text-dark-500 { color: var(--dark-500) !important; }
.text-dark-700 { color: var(--dark-700) !important; }
.hover\:text-dark-700:hover { color: var(--dark-700) !important; }

.text-green-500 { color: var(--green-500) !important; }
.text-green-700 { color: var(--green-700) !important; }
.hover\:text-green-700:hover { color: var(--green-700) !important; }

.text-red-500 { color: var(--red-500) !important; }
.text-red-700 { color: var(--red-700) !important; }
.hover\:text-red-700:hover { color: var(--red-700) !important; }

.text-neutral-500 { color: var(--neutral-500) !important; }
.text-neutral-700 { color: var(--neutral-700) !important; }
.hover\:text-neutral-700:hover { color: var(--neutral-700) !important; }