/**
 * Systematic Color Management System for Fan-X RPM Lite
 * 
 * This file implements a clean approach to color management across the application.
 * Instead of using !important flags everywhere, it sets up a hierarchical color system
 * that respects content-specific colors while maintaining consistency.
 */

:root {
  /* Core palette - use these variables in your components */
  --text-primary: rgb(15, 23, 42);
  --text-secondary: rgb(71, 85, 105);
  --text-muted: rgb(100, 116, 139);
  --text-white: rgb(255, 255, 255);
  
  --bg-primary: rgb(255, 255, 255);
  --bg-secondary: rgb(248, 250, 252);
  --bg-muted: rgb(241, 245, 249);
  
  --border-light: rgb(241, 245, 249);
  --border-medium: rgb(226, 232, 240);
  
  /* Consistent brand colors */
  --blue-50: rgb(239, 246, 255);
  --blue-100: rgb(219, 234, 254);
  --blue-500: rgb(59, 130, 246);
  --blue-600: rgb(37, 99, 235);
  --blue-700: rgb(29, 78, 216);
  --blue-900: rgb(30, 58, 138);
  
  --green-50: rgb(240, 253, 244);
  --green-100: rgb(220, 252, 231);
  --green-500: rgb(34, 197, 94);
  --green-600: rgb(22, 163, 74);
  --green-700: rgb(21, 128, 61);
  --green-900: rgb(20, 83, 45);
  
  --orange-50: rgb(255, 247, 237);
  --orange-100: rgb(255, 237, 213);
  --orange-500: rgb(249, 115, 22);
  --orange-600: rgb(234, 88, 12);
  --orange-700: rgb(194, 65, 12);
  --orange-900: rgb(124, 45, 18);
  
  --purple-50: rgb(250, 245, 255);
  --purple-100: rgb(243, 232, 255);
  --purple-500: rgb(168, 85, 247);
  --purple-600: rgb(147, 51, 234);
  --purple-700: rgb(126, 34, 206);
  --purple-900: rgb(88, 28, 135);
  
  --indigo-50: rgb(238, 242, 255);
  --indigo-100: rgb(224, 231, 255);
  --indigo-500: rgb(99, 102, 241);
  --indigo-600: rgb(79, 70, 229);
  --indigo-700: rgb(67, 56, 202);
  --indigo-900: rgb(49, 46, 129);
}

/* Base elements - set default colors */
body {
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}

p {
  color: var(--text-primary);
}

/* Use standard Tailwind color classes as intended */
/* No special overrides needed */

/* Form elements */
input, select, textarea {
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border-color: var(--border-medium);
}

/* Dropdown content */
[role="listbox"],
[role="menu"],
.select-content,
.popover-content {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-light);
}

/* Global gradient text color */
.bg-gradient-to-r.from-blue-600,
.bg-gradient-to-r.from-blue-600 * {
  color: var(--text-white);
}

/* Override Select component specifically */
.select-trigger {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

/* Colored background sections */
.bg-blue-50 { background-color: var(--blue-50); }
.bg-blue-100 { background-color: var(--blue-100); }
.text-blue-500 { color: var(--blue-500); }
.text-blue-600 { color: var(--blue-600); }
.text-blue-700 { color: var(--blue-700); }
.text-blue-900 { color: var(--blue-900); }

.bg-green-50 { background-color: var(--green-50); }
.bg-green-100 { background-color: var(--green-100); }
.text-green-500 { color: var(--green-500); }
.text-green-600 { color: var(--green-600); }
.text-green-700 { color: var(--green-700); }
.text-green-900 { color: var(--green-900); }

.bg-orange-50 { background-color: var(--orange-50); }
.bg-orange-100 { background-color: var(--orange-100); }
.text-orange-500 { color: var(--orange-500); }
.text-orange-600 { color: var(--orange-600); }
.text-orange-700 { color: var(--orange-700); }
.text-orange-900 { color: var(--orange-900); }

.bg-purple-50 { background-color: var(--purple-50); }
.bg-purple-100 { background-color: var(--purple-100); }
.text-purple-500 { color: var(--purple-500); }
.text-purple-600 { color: var(--purple-600); }
.text-purple-700 { color: var(--purple-700); }
.text-purple-900 { color: var(--purple-900); }

.bg-indigo-50 { background-color: var(--indigo-50); }
.bg-indigo-100 { background-color: var(--indigo-100); }
.text-indigo-500 { color: var(--indigo-500); }
.text-indigo-600 { color: var(--indigo-600); }
.text-indigo-700 { color: var(--indigo-700); }
.text-indigo-900 { color: var(--indigo-900); }

/* Allow standard text colors to work */
h1, h2, h3, h4, h5, h6, p, span, div {
  color: inherit;
}

/* Button styling reset */
button, 
[role="button"],
.btn {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

/* Primary colored buttons */
.btn-primary,
button[data-variant="primary"],
[role="button"][data-variant="primary"] {
  background-color: var(--blue-500);
  color: var(--text-white);
  border-color: var(--blue-600);
}

/* General white text for dark gradients */
.bg-gradient-to-r.from-blue-600 h1,
.bg-gradient-to-r.from-blue-600 p {
  color: white;
}