/* SparrowHR Theme Configuration
   ================================
   Central theme file for all color definitions.
   Update colors here to change the entire application theme.
*/

:root {
  /* ==========================================
     PRIMARY BRAND COLORS - Royal Blue
     ========================================== */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;  /* Base Royal Blue */
  --color-primary-600: #2563eb;  /* Hover State */
  --color-primary-700: #1d4ed8;  /* Active State */
  --color-primary-800: #1e40af;  /* Dark Royal Blue */
  --color-primary-900: #1e3a8a;  /* Darkest */

  /* ==========================================
     SECONDARY COLORS - Slate Gray
     ========================================== */
  --color-secondary-50: #f8fafc;
  --color-secondary-100: #f1f5f9;
  --color-secondary-200: #e2e8f0;
  --color-secondary-300: #cbd5e1;
  --color-secondary-400: #94a3b8;
  --color-secondary-500: #64748b;
  --color-secondary-600: #475569;
  --color-secondary-700: #334155;
  --color-secondary-800: #1e293b;
  --color-secondary-900: #0f172a;

  /* ==========================================
     ACCENT COLOR - Amber
     ========================================== */
  --color-accent-50: #fffbeb;
  --color-accent-100: #fef3c7;
  --color-accent-200: #fde68a;
  --color-accent-300: #fcd34d;
  --color-accent-400: #fbbf24;
  --color-accent-500: #f59e0b;
  --color-accent-600: #d97706;
  --color-accent-700: #b45309;
  --color-accent-800: #92400e;
  --color-accent-900: #78350f;

  /* ==========================================
     SEMANTIC COLORS
     ========================================== */
  
  /* Success - Green */
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-800: #166534;
  --color-success-900: #14532d;

  /* Warning - Amber/Yellow */
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;

  /* Danger/Error - Red */
  --color-danger-50: #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-200: #fecaca;
  --color-danger-300: #fca5a5;
  --color-danger-400: #f87171;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;
  --color-danger-800: #991b1b;
  --color-danger-900: #7f1d1d;

  /* Info - Sky Blue */
  --color-info-50: #f0f9ff;
  --color-info-100: #e0f2fe;
  --color-info-200: #bae6fd;
  --color-info-300: #7dd3fc;
  --color-info-400: #38bdf8;
  --color-info-500: #0ea5e9;
  --color-info-600: #0284c7;
  --color-info-700: #0369a1;
  --color-info-800: #075985;
  --color-info-900: #0c4a6e;

  /* ==========================================
     NEUTRAL COLORS - Gray
     ========================================== */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* ==========================================
     COMPONENT-SPECIFIC COLORS
     ========================================== */
  
  /* Navigation */
  --nav-bg: var(--color-secondary-800);
  --nav-text: var(--color-gray-100);
  --nav-hover: var(--color-secondary-700);
  --nav-active: var(--color-primary-600);
  
  /* Buttons */
  --btn-primary-bg: var(--color-primary-600);
  --btn-primary-hover: var(--color-primary-700);
  --btn-secondary-bg: var(--color-secondary-600);
  --btn-secondary-hover: var(--color-secondary-700);
  
  /* Forms */
  --input-border: var(--color-gray-300);
  --input-focus: var(--color-primary-500);
  --input-error: var(--color-danger-500);
  
  /* Badges/Status */
  --badge-active: var(--color-success-500);
  --badge-inactive: var(--color-gray-500);
  --badge-pending: var(--color-warning-500);
  --badge-error: var(--color-danger-500);
}

/* ==========================================
   UTILITY CLASSES
   These classes can be used directly in HTML
   ========================================== */

/* Background Colors */
.bg-primary { background-color: var(--color-primary-500); }
.bg-primary-light { background-color: var(--color-primary-100); }
.bg-primary-dark { background-color: var(--color-primary-700); }

.bg-success { background-color: var(--color-success-500); }
.bg-success-light { background-color: var(--color-success-100); }

.bg-warning { background-color: var(--color-warning-500); }
.bg-warning-light { background-color: var(--color-warning-100); }

.bg-danger { background-color: var(--color-danger-500); }
.bg-danger-light { background-color: var(--color-danger-100); }

.bg-info { background-color: var(--color-info-500); }
.bg-info-light { background-color: var(--color-info-100); }

/* Text Colors */
.text-primary { color: var(--color-primary-600); }
.text-success { color: var(--color-success-600); }
.text-warning { color: var(--color-warning-600); }
.text-danger { color: var(--color-danger-600); }
.text-info { color: var(--color-info-600); }

/* Border Colors */
.border-primary { border-color: var(--color-primary-500); }
.border-success { border-color: var(--color-success-500); }
.border-warning { border-color: var(--color-warning-500); }
.border-danger { border-color: var(--color-danger-500); }
.border-info { border-color: var(--color-info-500); }

/* Status Badges */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

.badge-success {
  background-color: var(--color-success-100);
  color: var(--color-success-800);
}

.badge-warning {
  background-color: var(--color-warning-100);
  color: var(--color-warning-800);
}

.badge-danger {
  background-color: var(--color-danger-100);
  color: var(--color-danger-800);
}

.badge-info {
  background-color: var(--color-info-100);
  color: var(--color-info-800);
}

.badge-neutral {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}

/* Button Variants */
.btn {
  @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  background-color: var(--color-primary-600);
  color: white;
}
.btn-primary:hover {
  background-color: var(--color-primary-700);
}

.btn-success {
  background-color: var(--color-success-600);
  color: white;
}
.btn-success:hover {
  background-color: var(--color-success-700);
}

.btn-danger {
  background-color: var(--color-danger-600);
  color: white;
}
.btn-danger:hover {
  background-color: var(--color-danger-700);
}

.btn-secondary {
  background-color: var(--color-secondary-600);
  color: white;
}
.btn-secondary:hover {
  background-color: var(--color-secondary-700);
}

/* Card Styles */
.card {
  @apply bg-white rounded-lg shadow-sm border border-gray-200;
}

.card-header {
  @apply px-6 py-4 border-b border-gray-200;
}

.card-body {
  @apply px-6 py-4;
}

/* Alert Styles */
.alert {
  @apply p-4 rounded-lg border;
}

.alert-success {
  background-color: var(--color-success-50);
  border-color: var(--color-success-200);
  color: var(--color-success-900);
}

.alert-warning {
  background-color: var(--color-warning-50);
  border-color: var(--color-warning-200);
  color: var(--color-warning-900);
}

.alert-danger {
  background-color: var(--color-danger-50);
  border-color: var(--color-danger-200);
  color: var(--color-danger-900);
}

.alert-info {
  background-color: var(--color-info-50);
  border-color: var(--color-info-200);
  color: var(--color-info-900);
}