/* ========================================
   DAMSMART ADMIN - CENTRALIZED COLOR SYSTEM
   ========================================
   
   ⚠️ THIS IS THE SINGLE SOURCE OF TRUTH FOR ALL COLORS
   
   All other CSS files MUST use these variables.
   To change the entire site's color scheme, edit ONLY this file.
   
   This file should be loaded FIRST in admin_layout.html
   ======================================== */

/* ==========================================
   LIGHT THEME (Default)
   ========================================== */
:root {
  /* ===== PRIMARY BRAND COLOR ===== */
  --color-primary-900: #1e3a8a;  /* Darkest */
  --color-primary-800: #1e40af;
  --color-primary-700: #1d4ed8;
  --color-primary-600: #2563eb;
  --color-primary-500: #3b82f6;  /* Main Primary */
  --color-primary-400: #60a5fa;
  --color-primary-300: #93c5fd;
  --color-primary-200: #bfdbfe;
  --color-primary-100: #dbeafe;
  --color-primary-50: #eff6ff;   /* Lightest */
  
  /* ===== SUCCESS (Green) ===== */
  --color-success-900: #064e3b;
  --color-success-800: #065f46;
  --color-success-700: #047857;
  --color-success-600: #059669;
  --color-success-500: #10b981;  /* Main Success */
  --color-success-400: #34d399;
  --color-success-300: #6ee7b7;
  --color-success-200: #a7f3d0;
  --color-success-100: #d1fae5;
  --color-success-50: #ecfdf5;
  
  /* ===== WARNING (Amber) ===== */
  --color-warning-900: #78350f;
  --color-warning-800: #92400e;
  --color-warning-700: #b45309;
  --color-warning-600: #d97706;
  --color-warning-500: #f59e0b;  /* Main Warning */
  --color-warning-400: #fbbf24;
  --color-warning-300: #fcd34d;
  --color-warning-200: #fde68a;
  --color-warning-100: #fef3c7;
  --color-warning-50: #fffbeb;
  
  /* ===== ERROR/DANGER (Red) ===== */
  --color-error-900: #7f1d1d;
  --color-error-800: #991b1b;
  --color-error-700: #b91c1c;
  --color-error-600: #dc2626;
  --color-error-500: #ef4444;    /* Main Error */
  --color-error-400: #f87171;
  --color-error-300: #fca5a5;
  --color-error-200: #fecaca;
  --color-error-100: #fee2e2;
  --color-error-50: #fef2f2;
  
  /* ===== INFO (Cyan) ===== */
  --color-info-900: #164e63;
  --color-info-800: #155e75;
  --color-info-700: #0e7490;
  --color-info-600: #0891b2;
  --color-info-500: #06b6d4;     /* Main Info */
  --color-info-400: #22d3ee;
  --color-info-300: #67e8f9;
  --color-info-200: #a5f3fc;
  --color-info-100: #cffafe;
  --color-info-50: #ecfeff;
  
  /* ===== NEUTRAL GRAYS (Light Theme) ===== */
  --color-gray-950: #030712;     /* Almost black */
  --color-gray-900: #111827;     /* Darkest text */
  --color-gray-800: #1f2937;
  --color-gray-700: #374151;
  --color-gray-600: #4b5563;
  --color-gray-500: #6b7280;     /* Medium gray */
  --color-gray-400: #9ca3af;
  --color-gray-300: #d1d5db;
  --color-gray-200: #e5e7eb;
  --color-gray-100: #f3f4f6;
  --color-gray-50: #f9fafb;      /* Lightest gray */
  --color-white: #ffffff;
  
  /* ===== SEMANTIC COLORS (Theme-aware) ===== */
  /* These map to theme variables when a theme is active, with fallbacks for light theme */
  /* Backgrounds */
  --bg-primary: var(--theme-bg-card, var(--color-white));
  --bg-secondary: var(--theme-bg-secondary, var(--color-gray-50));
  --bg-tertiary: var(--theme-bg-tertiary, var(--color-gray-100));
  --bg-hover: var(--theme-bg-hover, var(--color-gray-200));
  --bg-active: var(--theme-bg-accent, var(--color-gray-300));
  --bg-sidebar: var(--theme-bg-primary, var(--color-gray-900));
  
  /* Text Colors */
  --text-primary: var(--theme-text-primary, var(--color-gray-900));
  --text-secondary: var(--theme-text-secondary, var(--color-gray-600));
  --text-tertiary: var(--theme-text-muted, var(--color-gray-400));
  --text-inverse: var(--color-white);
  --text-link: var(--theme-text-accent, var(--color-primary-600));
  --text-link-hover: var(--theme-accent, var(--color-primary-700));
  
  /* Border Colors */
  --border-color: var(--theme-border-light, var(--color-gray-200));
  --border-hover: var(--theme-border-medium, var(--color-gray-300));
  --border-focus: var(--theme-text-accent, var(--color-primary-500));
  --border-error: var(--color-error-500);
  
  /* Button Colors */
  --button-primary-bg: var(--color-primary-500);
  --button-primary-bg-hover: var(--color-primary-600);
  --button-primary-text: var(--color-white);
  
  --button-secondary-bg: var(--bg-secondary);
  --button-secondary-bg-hover: var(--bg-hover);
  --button-secondary-text: var(--text-primary);
  
  --button-success-bg: var(--color-success-500);
  --button-success-bg-hover: var(--color-success-600);
  --button-success-text: var(--color-white);
  
  --button-danger-bg: var(--color-error-500);
  --button-danger-bg-hover: var(--color-error-600);
  --button-danger-text: var(--color-white);
  
  /* Sidebar Colors (Theme-aware) */
  --sidebar-bg: var(--theme-bg-primary, var(--color-gray-900));
  --sidebar-text: var(--theme-text-secondary, var(--color-gray-300));
  --sidebar-text-hover: var(--theme-text-primary, var(--color-white));
  --sidebar-hover-bg: var(--theme-bg-hover, var(--color-gray-800));
  --sidebar-active-bg: var(--theme-bg-accent, var(--color-primary-500));
  --sidebar-active-text: var(--theme-text-primary, var(--color-white));
  --sidebar-border: var(--theme-border-light, rgba(255, 255, 255, 0.1));
  
  /* Status Badge Colors */
  --badge-primary-bg: var(--color-primary-100);
  --badge-primary-text: var(--color-primary-700);
  
  --badge-success-bg: var(--color-success-100);
  --badge-success-text: var(--color-success-700);
  
  --badge-warning-bg: var(--color-warning-100);
  --badge-warning-text: var(--color-warning-700);
  
  --badge-error-bg: var(--color-error-100);
  --badge-error-text: var(--color-error-700);
  
  --badge-info-bg: var(--color-info-100);
  --badge-info-text: var(--color-info-700);
  
  /* Alert/Message Colors */
  --alert-success-bg: var(--color-success-50);
  --alert-success-border: var(--color-success-500);
  --alert-success-text: var(--color-success-900);
  
  --alert-warning-bg: var(--color-warning-50);
  --alert-warning-border: var(--color-warning-500);
  --alert-warning-text: var(--color-warning-900);
  
  --alert-error-bg: var(--color-error-50);
  --alert-error-border: var(--color-error-500);
  --alert-error-text: var(--color-error-900);
  
  --alert-info-bg: var(--color-info-50);
  --alert-info-border: var(--color-info-500);
  --alert-info-text: var(--color-info-900);
  
  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Focus Ring */
  --focus-ring-color: var(--color-primary-500);
  --focus-ring-offset: 2px;
  --support-header-gradient-start: #667eea;
  --support-header-gradient-end: #764ba2;
  --support-table-header-bg: #f7f7f7;
  --support-table-header-border: #e0e0e0;
  --support-table-row-border: #f0f0f0;
  --support-table-row-hover-bg: #f9f9f9;
  --support-priority-high-bg: #fed7aa;
  --support-priority-high-text: #9a3412;
  --support-priority-low-bg: #e0e7ff;
  --support-priority-low-text: #3730a3;
  --support-accent-primary: #4f46e5;
  --support-accent-primary-hover: #4338ca;
  --service-monitor-gold: #f1c574;
  --service-monitor-gold-muted: #e1d6b6;
  --service-monitor-border-subtle: rgba(241, 197, 116, 0.1);
  --service-monitor-border-soft: rgba(241, 197, 116, 0.2);
  --service-monitor-border-strong: rgba(241, 197, 116, 0.3);
  --service-monitor-border-highlight: rgba(241, 197, 116, 0.5);
  --service-monitor-bg-subtle: rgba(241, 197, 116, 0.1);
  --service-monitor-bg-soft: rgba(241, 197, 116, 0.2);
  --service-monitor-warning-glow: 0 0 8px rgba(251, 191, 36, 0.5);
  --service-monitor-error-glow: 0 0 8px rgba(239, 68, 68, 0.5);
  --service-monitor-success-glow: 0 0 8px rgba(74, 222, 128, 0.5);
  --service-monitor-unknown-glow: 0 0 8px rgba(107, 114, 128, 0.5);
  --service-monitor-stop-border: rgba(239, 68, 68, 0.3);
  --service-monitor-stop-bg: rgba(239, 68, 68, 0.1);
  --service-monitor-stop-hover-bg: rgba(239, 68, 68, 0.2);
  --service-monitor-stop-hover-border: rgba(239, 68, 68, 0.5);
  --service-monitor-restart-border: rgba(74, 222, 128, 0.3);
  --service-monitor-restart-bg: rgba(74, 222, 128, 0.1);
  --service-monitor-restart-hover-bg: rgba(74, 222, 128, 0.2);
  --service-monitor-restart-hover-border: rgba(74, 222, 128, 0.5);
  --brand-primary-soft-bg: rgba(102, 126, 234, 0.05);
  --brand-primary-soft-bg-strong: rgba(102, 126, 234, 0.1);
  --brand-primary-grid-line: rgba(102, 126, 234, 0.1);
  --brand-primary-soft-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  --brand-primary-strong-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
  --brand-primary-outline-soft: 0 0 0 3px rgba(102, 126, 234, 0.1);
  --brand-primary-outline-strong: 0 0 0 4px rgba(102, 126, 234, 0.1);
  --visual-builder-standalone-dropzone-bg: rgba(0, 123, 255, 0.05);
  --visual-builder-standalone-selection-outline: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ==========================================
   DARK THEME
   ========================================== */
[data-theme="dark"] {
  /* ===== DARK THEME ADJUSTMENTS ===== */
  /* Primary colors stay the same but use lighter shades for better contrast */
  --color-primary-main: var(--color-primary-400);  /* Lighter in dark mode */
  
  /* Neutral Grays (Inverted for dark) */
  --bg-primary: var(--color-gray-900);
  --bg-secondary: var(--color-gray-800);
  --bg-tertiary: var(--color-gray-700);
  --bg-hover: var(--color-gray-600);
  --bg-active: var(--color-gray-500);
  --bg-sidebar: var(--color-gray-950);
  
  /* Text Colors (Inverted) */
  --text-primary: var(--color-gray-50);
  --text-secondary: var(--color-gray-300);
  --text-tertiary: var(--color-gray-500);
  --text-inverse: var(--color-gray-900);
  --text-link: var(--color-primary-400);
  --text-link-hover: var(--color-primary-300);
  
  /* Border Colors */
  --border-color: var(--color-gray-700);
  --border-hover: var(--color-gray-600);
  --border-focus: var(--color-primary-400);
  
  /* Button Colors - use brighter shades in dark mode */
  --button-primary-bg: var(--color-primary-500);
  --button-primary-bg-hover: var(--color-primary-400);
  
  /* Sidebar in dark mode - even darker */
  --sidebar-bg: var(--color-gray-950);
  --sidebar-text: var(--color-gray-400);
  --sidebar-text-hover: var(--color-gray-100);
  --sidebar-hover-bg: var(--color-gray-800);
  --sidebar-active-bg: var(--color-primary-600);
  --sidebar-border: rgba(255, 255, 255, 0.05);
  
  /* Badges in dark mode */
  --badge-primary-bg: var(--color-primary-900);
  --badge-primary-text: var(--color-primary-200);
  
  --badge-success-bg: var(--color-success-900);
  --badge-success-text: var(--color-success-200);
  
  --badge-warning-bg: var(--color-warning-900);
  --badge-warning-text: var(--color-warning-200);
  
  --badge-error-bg: var(--color-error-900);
  --badge-error-text: var(--color-error-200);
  
  --badge-info-bg: var(--color-info-900);
  --badge-info-text: var(--color-info-200);
  
  /* Alerts in dark mode */
  --alert-success-bg: var(--color-success-900);
  --alert-success-border: var(--color-success-500);
  --alert-success-text: var(--color-success-100);
  
  --alert-warning-bg: var(--color-warning-900);
  --alert-warning-border: var(--color-warning-500);
  --alert-warning-text: var(--color-warning-100);
  
  --alert-error-bg: var(--color-error-900);
  --alert-error-border: var(--color-error-500);
  --alert-error-text: var(--color-error-100);
  
  --alert-info-bg: var(--color-info-900);
  --alert-info-border: var(--color-info-500);
  --alert-info-text: var(--color-info-100);
  
  /* Shadows - stronger in dark mode */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* ==========================================
   LEGACY VARIABLE SUPPORT
   (For backward compatibility during transition)
   ========================================== */
:root {
  /* Map old variable names to new centralized ones */
  --brand-primary: var(--color-primary-500);
  --brand-primary-hover: var(--color-primary-600);
  --brand-primary-light: var(--color-primary-100);
  
  --success: var(--color-success-500);
  --success-light: var(--color-success-100);
  
  --warning: var(--color-warning-500);
  --warning-light: var(--color-warning-100);
  
  --error: var(--color-error-500);
  --error-light: var(--color-error-100);
  --color-danger: var(--color-error-500);
  
  --info: var(--color-info-500);
  --info-light: var(--color-info-100);
  
  /* Legacy primary naming */
  --color-primary: var(--color-primary-500);
  --color-primary-dark: var(--color-primary-600);
}

[data-theme="dark"] {
  /* Dark theme legacy support */
  --brand-primary: var(--color-primary-400);
  --brand-primary-hover: var(--color-primary-300);
  --brand-primary-light: var(--color-primary-900);
}

/* ==========================================
   USAGE GUIDE & EXAMPLES
   ========================================== 
   
   HOW TO USE THESE COLORS:
   
   ✅ CORRECT:
   .my-button {
     background: var(--button-primary-bg);
     color: var(--button-primary-text);
   }
   
   .my-card {
     background: var(--bg-primary);
     border: 1px solid var(--border-color);
     color: var(--text-primary);
   }
   
   ❌ INCORRECT:
   .my-button {
     background: #3b82f6;  ← NEVER hardcode colors!
   }
   
   ========================================== */