/* Clipixy Brand Colors - CSS Variables */
:root {
  --color-primary: #0C2D4A;      /* Deep Navy Blue - Backgrounds, headers, primary text, branding base */
  --color-secondary: #FF6B59;    /* Bright Coral - Buttons, active states, accents, hover states */
  --color-accent: #FFA500;       /* Yellowish Orange - Highlights, hover glow, minor buttons, animated elements */
  --color-light: #FFF5E5;        /* Soft Cream White - Backgrounds, card surfaces, contrast text backgrounds */
  --color-dark: #061A2F;         /* Rich Midnight Blue - Footers, navbars, shadows, overlays */
  
  /* Additional utility colors */
  --color-primary-light: #1a4a6b;
  --color-primary-dark: #061a2f;
  --color-secondary-light: #ff8a7a;
  --color-secondary-dark: #e55a4a;
  --color-accent-light: #ffb84d;
  --color-accent-dark: #e59400;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary) 100%);
  
  /* Glass effects */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: blur(20px);
  
  /* Shadows */
  --shadow-light: 0 4px 6px rgba(12, 45, 74, 0.1);
  --shadow-medium: 0 10px 25px rgba(12, 45, 74, 0.15);
  --shadow-heavy: 0 20px 40px rgba(12, 45, 74, 0.2);
}

/* Utility classes using brand colors */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-light { background-color: var(--color-light); }
.bg-dark { background-color: var(--color-dark); }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-light { color: var(--color-light); }
.text-dark { color: var(--color-dark); }

.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-accent { border-color: var(--color-accent); }

.gradient-primary { background: var(--gradient-primary); }
.gradient-secondary { background: var(--gradient-secondary); }
.gradient-accent { background: var(--gradient-accent); }

.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

/* Hover effects */
.hover-primary:hover { background-color: var(--color-primary-light); }
.hover-secondary:hover { background-color: var(--color-secondary-light); }
.hover-accent:hover { background-color: var(--color-accent-light); }

/* Focus states */
.focus-primary:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(12, 45, 74, 0.1); }
.focus-secondary:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(255, 107, 89, 0.1); }
.focus-accent:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.1); } 

/* Dark Mode Variables */
:root[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --border-color: #334155;
  --card-bg: #1e293b;
  --input-bg: #1e293b;
  --hover-bg: #334155;
}

/* Light Mode Variables (default) */
:root[data-theme="light"],
:root:not([data-theme]) {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --border-color: #e2e8f0;
  --card-bg: #ffffff;
  --input-bg: #f8fafc;
  --hover-bg: #f1f5f9;
}

/* Dark Mode Classes */
.dark-mode body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.dark-mode .bg-white {
  background-color: var(--card-bg) !important;
}

.dark-mode .text-gray-900 {
  color: var(--text-primary) !important;
}

.dark-mode .text-gray-700 {
  color: var(--text-secondary) !important;
}

.dark-mode .text-gray-600 {
  color: var(--text-secondary) !important;
}

.dark-mode .text-gray-500 {
  color: var(--text-tertiary) !important;
}

.dark-mode .text-gray-400 {
  color: var(--text-tertiary) !important;
}

.dark-mode .border-gray-200,
.dark-mode .border-gray-100 {
  border-color: var(--border-color) !important;
}

.dark-mode .bg-gray-50 {
  background-color: var(--input-bg) !important;
}

.dark-mode .bg-gray-100 {
  background-color: var(--bg-tertiary) !important;
}

.dark-mode .bg-gray-200 {
  background-color: var(--border-color) !important;
}

.dark-mode .hover\:bg-gray-50:hover,
.dark-mode .hover\:bg-gray-100:hover {
  background-color: var(--hover-bg) !important;
}

/* Main content areas */
.dark-mode #mainContent {
  background-color: var(--bg-primary) !important;
}

/* Cards and containers */
.dark-mode .rounded-2xl.bg-white,
.dark-mode .rounded-xl.bg-white,
.dark-mode .rounded-lg.bg-white {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Search input dark mode */
.dark-mode input[type="text"],
.dark-mode input[type="search"] {
  background-color: var(--input-bg) !important;
  color: var(--text-primary) !important;
}

.dark-mode input[type="text"]::placeholder,
.dark-mode input[type="search"]::placeholder {
  color: var(--text-tertiary) !important;
}

/* Stats cards and other white backgrounds */
.dark-mode .bg-white.rounded-2xl,
.dark-mode .bg-white.rounded-xl {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}