/* AlAmin Color System */
/* =================== */

/* Primary Color Palette */
:root {
  /* Brand Colors derived from Official Logo (iconLogo.png) */
  --alamin-primary-50: #f0f7fa;
  --alamin-primary-100: #d9ebf3;
  --alamin-primary-200: #b5d8e7;
  --alamin-primary-300: #82bcd6;
  --alamin-primary-400: #469dc2;
  --alamin-primary-500: #08749e;
  --alamin-primary-600: #015277;
  --alamin-primary-700: #014260;
  --alamin-primary-800: #02374f;
  --alamin-primary-900: #002d42;
  
  /* Secondary Colors */
  --alamin-secondary-50: #f5f3ff;
  --alamin-secondary-100: #ede9fe;
  --alamin-secondary-200: #ddd6fe;
  --alamin-secondary-300: #c4b5fd;
  --alamin-secondary-400: #a78bfa;
  --alamin-secondary-500: #8b5cf6;
  --alamin-secondary-600: #7c3aed;
  --alamin-secondary-700: #6d28d9;
  --alamin-secondary-800: #5b21b6;
  --alamin-secondary-900: #4c1d95;
  
  /* Success Colors */
  --alamin-success-50: #f0fdf4;
  --alamin-success-100: #dcfce7;
  --alamin-success-200: #bbf7d0;
  --alamin-success-300: #86efac;
  --alamin-success-400: #4ade80;
  --alamin-success-500: #22c55e;
  --alamin-success-600: #16a34a;
  --alamin-success-700: #15803d;
  --alamin-success-800: #166534;
  --alamin-success-900: #14532d;
  
  /* Warning Colors */
  --alamin-warning-50: #fffbeb;
  --alamin-warning-100: #fef3c7;
  --alamin-warning-200: #fde68a;
  --alamin-warning-300: #fcd34d;
  --alamin-warning-400: #fbbf24;
  --alamin-warning-500: #f59e0b;
  --alamin-warning-600: #d97706;
  --alamin-warning-700: #b45309;
  --alamin-warning-800: #92400e;
  --alamin-warning-900: #78350f;
  
  /* Danger Colors */
  --alamin-danger-50: #fef2f2;
  --alamin-danger-100: #fee2e2;
  --alamin-danger-200: #fecaca;
  --alamin-danger-300: #fca5a5;
  --alamin-danger-400: #f87171;
  --alamin-danger-500: #ef4444;
  --alamin-danger-600: #dc2626;
  --alamin-danger-700: #b91c1c;
  --alamin-danger-800: #991b1b;
  --alamin-danger-900: #7f1d1d;
  
  /* Neutral Colors */
  --alamin-gray-50: #f9fafb;
  --alamin-gray-100: #f3f4f6;
  --alamin-gray-200: #e5e7eb;
  --alamin-gray-300: #d1d5db;
  --alamin-gray-400: #9ca3af;
  --alamin-gray-500: #6b7280;
  --alamin-gray-600: #4b5563;
  --alamin-gray-700: #374151;
  --alamin-gray-800: #1f2937;
  --alamin-gray-900: #111827;
  
  /* Semantic Color Assignments */
  --alamin-primary: var(--alamin-primary-600);
  --alamin-secondary: var(--alamin-secondary-600);
  --alamin-success: var(--alamin-success-600);
  --alamin-warning: var(--alamin-warning-600);
  --alamin-danger: var(--alamin-danger-600);
  --alamin-info: var(--alamin-primary-500);
  
  /* Background Colors */
  --alamin-bg-primary: var(--alamin-gray-50);
  --alamin-bg-secondary: #ffffff;
  --alamin-bg-tertiary: var(--alamin-gray-100);
  --alamin-bg-accent: var(--alamin-primary-50);
  --alamin-bg-muted: var(--alamin-gray-100);
  --alamin-bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Text Colors */
  --alamin-text-primary: var(--alamin-gray-900);
  --alamin-text-secondary: var(--alamin-gray-700);
  --alamin-text-tertiary: var(--alamin-gray-500);
  --alamin-text-muted: var(--alamin-gray-400);
  --alamin-text-inverse: #ffffff;
  --alamin-text-disabled: var(--alamin-gray-300);
  
  /* Border Colors */
  --alamin-border-primary: var(--alamin-gray-200);
  --alamin-border-secondary: var(--alamin-gray-300);
  --alamin-border-focus: var(--alamin-primary-400);
  --alamin-border-error: var(--alamin-danger-400);
  --alamin-border-success: var(--alamin-success-400);
  --alamin-border-warning: var(--alamin-warning-400);
  
  /* Shadow Colors */
  --alamin-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --alamin-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --alamin-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --alamin-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --alamin-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --alamin-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
  /* Interactive Colors */
  --alamin-hover-primary: var(--alamin-primary-700);
  --alamin-hover-secondary: var(--alamin-secondary-700);
  --alamin-hover-success: var(--alamin-success-700);
  --alamin-hover-warning: var(--alamin-warning-700);
  --alamin-hover-danger: var(--alamin-danger-700);
  --alamin-hover-bg: var(--alamin-gray-100);
  
  /* Focus Colors */
  --alamin-focus-ring: 0 0 0 2px var(--alamin-primary-200);
  --alamin-focus-ring-offset: 0 0 0 2px #ffffff;
  
  /* Gradients */
  --alamin-gradient-primary: linear-gradient(135deg, var(--alamin-primary-500) 0%, var(--alamin-primary-600) 100%);
  --alamin-gradient-secondary: linear-gradient(135deg, var(--alamin-secondary-500) 0%, var(--alamin-secondary-600) 100%);
  --alamin-gradient-accent: linear-gradient(135deg, var(--alamin-primary-500) 0%, var(--alamin-secondary-500) 100%);
  --alamin-gradient-success: linear-gradient(135deg, var(--alamin-success-500) 0%, var(--alamin-success-600) 100%);
  --alamin-gradient-warning: linear-gradient(135deg, var(--alamin-warning-500) 0%, var(--alamin-warning-600) 100%);
  --alamin-gradient-danger: linear-gradient(135deg, var(--alamin-danger-500) 0%, var(--alamin-danger-600) 100%);
  
  /* Legacy Color Variables (for backwards compatibility) */
  --alamin-white: #ffffff;
  --alamin-light: var(--alamin-gray-100);
  --alamin-dark: var(--alamin-gray-800);
  --alamin-text: var(--alamin-text-primary);
  --alamin-muted: var(--alamin-text-tertiary);
  --alamin-border: var(--alamin-border-primary);
}

/* Dark Mode Color Overrides */
.theme-dark {
  /* Dark Mode Background Colors */
  --alamin-bg-primary: var(--alamin-gray-900);
  --alamin-bg-secondary: var(--alamin-gray-800);
  --alamin-bg-tertiary: var(--alamin-gray-700);
  --alamin-bg-accent: var(--alamin-primary-900);
  --alamin-bg-muted: var(--alamin-gray-800);
  --alamin-bg-overlay: rgba(0, 0, 0, 0.8);
  
  /* Dark Mode Text Colors */
  --alamin-text-primary: var(--alamin-gray-100);
  --alamin-text-secondary: var(--alamin-gray-300);
  --alamin-text-tertiary: var(--alamin-gray-400);
  --alamin-text-muted: var(--alamin-gray-500);
  --alamin-text-inverse: var(--alamin-gray-900);
  --alamin-text-disabled: var(--alamin-gray-600);
  
  /* Dark Mode Border Colors */
  --alamin-border-primary: var(--alamin-gray-700);
  --alamin-border-secondary: var(--alamin-gray-600);
  --alamin-border-focus: var(--alamin-primary-400);
  
  /* Dark Mode Interactive Colors */
  --alamin-hover-bg: var(--alamin-gray-700);
  
  /* Dark Mode Focus Colors */
  --alamin-focus-ring: 0 0 0 2px var(--alamin-primary-400);
  --alamin-focus-ring-offset: 0 0 0 2px var(--alamin-gray-900);
  
  /* Dark Mode Shadows */
  --alamin-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --alamin-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --alamin-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --alamin-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --alamin-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  
  /* Legacy Color Variables Update */
  --alamin-white: var(--alamin-gray-800);
  --alamin-light: var(--alamin-gray-700);
  --alamin-dark: var(--alamin-gray-100);
  --alamin-text: var(--alamin-text-primary);
  --alamin-muted: var(--alamin-text-tertiary);
  --alamin-border: var(--alamin-border-primary);
}

/* Color Utility Classes */
.bg-primary { background-color: var(--alamin-primary); }
.bg-secondary { background-color: var(--alamin-secondary); }
.bg-success { background-color: var(--alamin-success); }
.bg-warning { background-color: var(--alamin-warning); }
.bg-danger { background-color: var(--alamin-danger); }
.bg-info { background-color: var(--alamin-info); }

.text-primary { color: var(--alamin-primary); }
.text-secondary { color: var(--alamin-secondary); }
.text-success { color: var(--alamin-success); }
.text-warning { color: var(--alamin-warning); }
.text-danger { color: var(--alamin-danger); }
.text-info { color: var(--alamin-info); }
.text-muted { color: var(--alamin-text-muted); }

.border-primary { border-color: var(--alamin-primary); }
.border-secondary { border-color: var(--alamin-secondary); }
.border-success { border-color: var(--alamin-success); }
.border-warning { border-color: var(--alamin-warning); }
.border-danger { border-color: var(--alamin-danger); }
.border-info { border-color: var(--alamin-info); }

/* Gradient Utility Classes */
.bg-gradient-primary { background: var(--alamin-gradient-primary); }
.bg-gradient-secondary { background: var(--alamin-gradient-secondary); }
.bg-gradient-accent { background: var(--alamin-gradient-accent); }
.bg-gradient-success { background: var(--alamin-gradient-success); }
.bg-gradient-warning { background: var(--alamin-gradient-warning); }
.bg-gradient-danger { background: var(--alamin-gradient-danger); }

/* Shadow Utility Classes */
.shadow-sm { box-shadow: var(--alamin-shadow-sm); }
.shadow-md { box-shadow: var(--alamin-shadow-md); }
.shadow-lg { box-shadow: var(--alamin-shadow-lg); }
.shadow-xl { box-shadow: var(--alamin-shadow-xl); }
.shadow-2xl { box-shadow: var(--alamin-shadow-2xl); }
.shadow-inner { box-shadow: var(--alamin-shadow-inner); }
.shadow-none { box-shadow: none; }

/* Focus Utility Classes */
.focus-ring:focus {
  outline: none;
  box-shadow: var(--alamin-focus-ring-offset), var(--alamin-focus-ring);
}

/* Hover Utility Classes */
.hover-primary:hover { background-color: var(--alamin-hover-primary); }
.hover-secondary:hover { background-color: var(--alamin-hover-secondary); }
.hover-success:hover { background-color: var(--alamin-hover-success); }
.hover-warning:hover { background-color: var(--alamin-hover-warning); }
.hover-danger:hover { background-color: var(--alamin-hover-danger); }
.hover-bg:hover { background-color: var(--alamin-hover-bg); }

/* Status Colors */
.status-online { color: var(--alamin-success); }
.status-offline { color: var(--alamin-text-muted); }
.status-busy { color: var(--alamin-warning); }
.status-away { color: var(--alamin-warning); }
.status-error { color: var(--alamin-danger); }

/* Badge Colors */
.badge-primary { 
  background-color: var(--alamin-primary);
  color: var(--alamin-text-inverse);
}
.badge-secondary { 
  background-color: var(--alamin-secondary);
  color: var(--alamin-text-inverse);
}
.badge-success { 
  background-color: var(--alamin-success);
  color: var(--alamin-text-inverse);
}
.badge-warning { 
  background-color: var(--alamin-warning);
  color: var(--alamin-text-inverse);
}
.badge-danger { 
  background-color: var(--alamin-danger);
  color: var(--alamin-text-inverse);
}
.badge-info { 
  background-color: var(--alamin-info);
  color: var(--alamin-text-inverse);
}

/* Alert Colors */
.alert-primary { 
  background-color: var(--alamin-primary-50);
  color: var(--alamin-primary-700);
  border-color: var(--alamin-primary-200);
}
.alert-secondary { 
  background-color: var(--alamin-secondary-50);
  color: var(--alamin-secondary-700);
  border-color: var(--alamin-secondary-200);
}
.alert-success { 
  background-color: var(--alamin-success-50);
  color: var(--alamin-success-700);
  border-color: var(--alamin-success-200);
}
.alert-warning { 
  background-color: var(--alamin-warning-50);
  color: var(--alamin-warning-700);
  border-color: var(--alamin-warning-200);
}
.alert-danger { 
  background-color: var(--alamin-danger-50);
  color: var(--alamin-danger-700);
  border-color: var(--alamin-danger-200);
}
.alert-info { 
  background-color: var(--alamin-primary-50);
  color: var(--alamin-primary-700);
  border-color: var(--alamin-primary-200);
}

/* Button Colors */
.btn-primary {
  background-color: var(--alamin-primary);
  border-color: var(--alamin-primary);
  color: var(--alamin-text-inverse);
}
.btn-primary:hover {
  background-color: var(--alamin-hover-primary);
  border-color: var(--alamin-hover-primary);
}

.btn-secondary {
  background-color: var(--alamin-secondary);
  border-color: var(--alamin-secondary);
  color: var(--alamin-text-inverse);
}
.btn-secondary:hover {
  background-color: var(--alamin-hover-secondary);
  border-color: var(--alamin-hover-secondary);
}

.btn-outline-primary {
  color: var(--alamin-primary);
  border-color: var(--alamin-primary);
  background-color: transparent;
}
.btn-outline-primary:hover {
  background-color: var(--alamin-primary);
  color: var(--alamin-text-inverse);
}

.btn-outline-secondary {
  color: var(--alamin-secondary);
  border-color: var(--alamin-secondary);
  background-color: transparent;
}
.btn-outline-secondary:hover {
  background-color: var(--alamin-secondary);
  color: var(--alamin-text-inverse);
}

/* Form Colors */
.form-control {
  background-color: var(--alamin-bg-secondary);
  border-color: var(--alamin-border-primary);
  color: var(--alamin-text-primary);
}
.form-control:focus {
  border-color: var(--alamin-border-focus);
  box-shadow: var(--alamin-focus-ring);
}
.form-control.is-invalid {
  border-color: var(--alamin-border-error);
}
.form-control.is-valid {
  border-color: var(--alamin-border-success);
}

/* Accessibility Colors */
@media (prefers-contrast: high) {
  :root {
    --alamin-primary: #005078;
    --alamin-secondary: #6d28d9;
    --alamin-success: #15803d;
    --alamin-warning: #b45309;
    --alamin-danger: #b91c1c;
    --alamin-text-primary: #000000;
    --alamin-text-secondary: #1f2937;
    --alamin-border-primary: #4b5563;
  }
  
  .theme-dark {
    --alamin-primary: #60a5fa;
    --alamin-secondary: #a78bfa;
    --alamin-success: #4ade80;
    --alamin-warning: #fbbf24;
    --alamin-danger: #f87171;
    --alamin-text-primary: #ffffff;
    --alamin-text-secondary: #f3f4f6;
    --alamin-border-primary: #d1d5db;
  }
}

/* Print Colors */
@media print {
  :root {
    --alamin-primary: #000000;
    --alamin-secondary: #4b5563;
    --alamin-success: #000000;
    --alamin-warning: #000000;
    --alamin-danger: #000000;
    --alamin-text-primary: #000000;
    --alamin-text-secondary: #374151;
    --alamin-bg-primary: #ffffff;
    --alamin-bg-secondary: #ffffff;
    --alamin-border-primary: #d1d5db;
  }
  
  .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
    box-shadow: none !important;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* Color Contrast Utilities */
.contrast-high {
  filter: contrast(150%);
}

.contrast-low {
  filter: contrast(75%);
}

/* Colorblind-friendly alternatives */
.colorblind-friendly {
  --alamin-primary: #1f77b4;
  --alamin-secondary: #ff7f0e;
  --alamin-success: #2ca02c;
  --alamin-warning: #d62728;
  --alamin-danger: #9467bd;
}

/* Color animation utilities */
@keyframes colorFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.color-fade-in {
  animation: colorFade 0.5s ease-in-out;
}

/* Brand specific colors */
.alamin-brand-primary {
  background: linear-gradient(135deg, #005078 0%, #08749e 100%);
  color: white;
}

.alamin-brand-secondary {
  background: linear-gradient(135deg, #9F7AEA 0%, #6d28d9 100%);
  color: white;
}

.alamin-brand-accent {
  background: linear-gradient(135deg, #005078 0%, #9F7AEA 100%);
  color: white;
}