/*-------------------------------------------------
* CIDE-ELE Color Variables
* Global color system for theming
* Can be overridden from control project
*--------------------------------------------------*/

:root {
  /* ============================================
   * BASE COLORS - Light Mode (Default)
   * ============================================ */
  
  /* Background Colors */
  --cide-ele-bg-primary: #ffffff;
  --cide-ele-bg-secondary: #f9fafb;
  --cide-ele-bg-tertiary: #f3f4f6;
  --cide-ele-bg-hover: #f9fafb;
  --cide-ele-bg-active: #f3f4f6;
  
  /* Text Colors */
  --cide-ele-text-primary: #1f2937;
  --cide-ele-text-secondary: #6b7280;
  --cide-ele-text-tertiary: #9ca3af;
  --cide-ele-text-disabled: #d1d5db;
  
  /* Border Colors */
  --cide-ele-border-primary: #e5e7eb;
  --cide-ele-border-secondary: #d1d5db;
  --cide-ele-border-hover: #9ca3af;
  --cide-ele-border-active: #3b82f6;
  
  /* Brand Colors */
  --cide-ele-brand-primary: #3b82f6;
  --cide-ele-brand-primary-hover: #2563eb;
  --cide-ele-brand-primary-light: #dbeafe;
  --cide-ele-brand-primary-dark: #1e40af;
  --cide-ele-brand-secondary: #4b5563;
  --cide-ele-brand-secondary-hover: #374151;
  
  /* Status Colors */
  --cide-ele-success: #10b981;
  --cide-ele-success-light: #d1fae5;
  --cide-ele-warning: #f59e0b;
  --cide-ele-warning-light: #fef3c7;
  --cide-ele-error: #ef4444;
  --cide-ele-error-light: #fee2e2;
  --cide-ele-info: #3b82f6;
  --cide-ele-info-light: #dbeafe;
  
  /* ============================================
   * DATA GRID SPECIFIC COLORS
   * ============================================ */
  
  /* Grid Backgrounds */
  --cide-ele-grid-bg: #ffffff;
  --cide-ele-grid-bg-striped: #fafafa;
  --cide-ele-grid-bg-hover: #f9fafb;
  --cide-ele-grid-bg-header: #fafafa;
  --cide-ele-grid-bg-header-hover: #f3f4f6;
  --cide-ele-grid-bg-group: #f3f4f6;
  
  /* Grid Borders */
  --cide-ele-grid-border: #e5e7eb;
  --cide-ele-grid-border-header: rgba(0, 0, 0, 0.08);
  --cide-ele-grid-border-hover: #3b82f6;
  
  /* Grid Text */
  --cide-ele-grid-text: #1f2937;
  --cide-ele-grid-text-header: #6b7280;
  --cide-ele-grid-text-secondary: #6b7280;
  
  /* ============================================
   * SHADOW & EFFECTS
   * ============================================ */
  
  --cide-ele-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --cide-ele-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --cide-ele-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --cide-ele-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  
  /* ============================================
   * SCROLLBAR COLORS
   * ============================================ */
  
  --cide-ele-scrollbar-track: #f9fafb;
  --cide-ele-scrollbar-thumb: #d1d5db;
  --cide-ele-scrollbar-thumb-hover: #9ca3af;
}

/* ============================================
 * DARK MODE COLORS
 * ============================================ */

[data-theme="dark"],
.dark-mode,
html.dark-mode,
body.dark-mode {
  /* Background Colors */
  --cide-ele-bg-primary: #1f2937;
  --cide-ele-bg-secondary: #111827;
  --cide-ele-bg-tertiary: #374151;
  --cide-ele-bg-hover: #374151;
  --cide-ele-bg-active: #4b5563;
  
  /* Text Colors */
  --cide-ele-text-primary: #f9fafb;
  --cide-ele-text-secondary: #d1d5db;
  --cide-ele-text-tertiary: #9ca3af;
  --cide-ele-text-disabled: #6b7280;
  
  /* Border Colors */
  --cide-ele-border-primary: #374151;
  --cide-ele-border-secondary: #4b5563;
  --cide-ele-border-hover: #60a5fa;
  --cide-ele-border-active: #3b82f6;
  
  /* Brand Colors */
  --cide-ele-brand-primary: #60a5fa;
  --cide-ele-brand-primary-hover: #3b82f6;
  --cide-ele-brand-primary-light: #1e3a8a;
  --cide-ele-brand-primary-dark: #1e40af;
  --cide-ele-brand-secondary: #4b5563;
  --cide-ele-brand-secondary-hover: #6b7280;
  
  /* Status Colors */
  --cide-ele-success: #34d399;
  --cide-ele-success-light: #065f46;
  --cide-ele-warning: #fbbf24;
  --cide-ele-warning-light: #78350f;
  --cide-ele-error: #f87171;
  --cide-ele-error-light: #7f1d1d;
  --cide-ele-info: #60a5fa;
  --cide-ele-info-light: #1e3a8a;
  
  /* Data Grid Dark Mode */
  --cide-ele-grid-bg: #1f2937;
  --cide-ele-grid-bg-striped: #111827;
  --cide-ele-grid-bg-hover: #374151;
  --cide-ele-grid-bg-header: #374151;
  --cide-ele-grid-bg-header-hover: #4b5563;
  --cide-ele-grid-bg-group: #374151;
  
  --cide-ele-grid-border: #374151;
  --cide-ele-grid-border-header: rgba(255, 255, 255, 0.1);
  --cide-ele-grid-border-hover: #60a5fa;
  
  --cide-ele-grid-text: #f9fafb;
  --cide-ele-grid-text-header: #d1d5db;
  --cide-ele-grid-text-secondary: #9ca3af;
  
  /* Scrollbar Dark Mode */
  --cide-ele-scrollbar-track: #1f2937;
  --cide-ele-scrollbar-thumb: #4b5563;
  --cide-ele-scrollbar-thumb-hover: #6b7280;
}

/* ============================================
 * MEDIA QUERY DARK MODE SUPPORT - REMOVED
 * Dark mode is now controlled exclusively through explicit dark-mode class 
 * or data-theme="dark" attribute to prevent OS preference from overriding 
 * application theme selection
 * ============================================ */

/* ============================================
 * LIGHT MODE EXPLICIT OVERRIDES
 * Force light mode colors when dark mode is NOT active
 * ============================================ */

:root:not([data-theme="dark"]):not(.dark-mode),
html:not([data-theme="dark"]):not(.dark-mode),
body:not([data-theme="dark"]):not(.dark-mode) {
  /* Background Colors */
  --cide-ele-bg-primary: #ffffff !important;
  --cide-ele-bg-secondary: #f9fafb !important;
  --cide-ele-bg-tertiary: #f3f4f6 !important;
  --cide-ele-bg-hover: #f9fafb !important;
  --cide-ele-bg-active: #f3f4f6 !important;
  
  /* Text Colors */
  --cide-ele-text-primary: #1f2937 !important;
  --cide-ele-text-secondary: #6b7280 !important;
  --cide-ele-text-tertiary: #9ca3af !important;
  --cide-ele-text-disabled: #d1d5db !important;
  
  /* Border Colors */
  --cide-ele-border-primary: #e5e7eb !important;
  --cide-ele-border-secondary: #d1d5db !important;
  --cide-ele-border-hover: #9ca3af !important;
  --cide-ele-border-active: #3b82f6 !important;
  
  /* Data Grid Light Mode */
  --cide-ele-grid-bg: #ffffff !important;
  --cide-ele-grid-bg-striped: #fafafa !important;
  --cide-ele-grid-bg-hover: #f9fafb !important;
  --cide-ele-grid-bg-header: #fafafa !important;
  --cide-ele-grid-bg-header-hover: #f3f4f6 !important;
  --cide-ele-grid-bg-group: #f3f4f6 !important;
  
  --cide-ele-grid-border: #e5e7eb !important;
  --cide-ele-grid-border-header: rgba(0, 0, 0, 0.08) !important;
  --cide-ele-grid-border-hover: #3b82f6 !important;
  
  --cide-ele-grid-text: #1f2937 !important;
  --cide-ele-grid-text-header: #6b7280 !important;
  --cide-ele-grid-text-secondary: #6b7280 !important;
  
  /* Scrollbar Light Mode */
  --cide-ele-scrollbar-track: #f9fafb !important;
  --cide-ele-scrollbar-thumb: #d1d5db !important;
  --cide-ele-scrollbar-thumb-hover: #9ca3af !important;
}