/**
 * JohnTech Management System - Unified Color Theme
 * 
 * Color palette from Admin Dashboard (max 5 colors + neutrals)
 * Primary, Secondary, Accent, Warning, Error + Neutral (backgrounds/text)
 * 
 * Load this file FIRST before styles.css
 */

:root {
  /* ========================================================================
   * CORE PALETTE (5 colors)
   * ======================================================================== */
  --color-primary: #0d6efd;
  --color-primary-hover: #0b5ed7;
  --color-primary-light: rgba(13, 110, 253, 0.1);
  --color-primary-border: rgba(13, 110, 253, 0.2);
  
  --color-secondary: #198754;
  --color-secondary-hover: #157347;
  --color-secondary-light: rgba(25, 135, 84, 0.1);
  --color-secondary-border: rgba(25, 135, 84, 0.2);
  
  --color-accent: #0dcaf0;
  --color-accent-hover: #0aa2c0;
  --color-accent-light: rgba(13, 202, 240, 0.1);
  --color-accent-border: rgba(13, 202, 240, 0.3);
  
  --color-warning: #ffc107;
  --color-warning-hover: #ffca2c;
  --color-warning-light: rgba(255, 193, 7, 0.1);
  --color-warning-border: rgba(255, 193, 7, 0.2);
  
  --color-error: #dc3545;
  --color-error-hover: #bb2d3b;
  --color-error-light: rgba(220, 53, 69, 0.1);
  --color-error-border: rgba(220, 53, 69, 0.2);
  
  /* ========================================================================
   * NEUTRAL (backgrounds, text, borders)
   * ======================================================================== */
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #e9ecef;
  --color-border-light: #f1f5f9;
  --color-neutral: #6b7280;
  --color-neutral-hover: #4b5563;
  
  --color-text: #1a202c;
  --color-text-heading: #2c3e50;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;
  
  /* ========================================================================
   * LEGACY ALIASES (for gradual migration - map to new palette)
   * ======================================================================== */
  --primary-color: var(--color-primary);
  --primary-dark: var(--color-primary-hover);
  --primary-light: var(--color-accent);
  --secondary-color: var(--color-secondary);
  --secondary-dark: var(--color-secondary-hover);
  --accent-color: var(--color-accent);
  --success-color: var(--color-secondary);
  --warning-color: var(--color-warning);
  --error-color: var(--color-error);
  --info-color: var(--color-accent);
  
  --light-bg: var(--color-bg);
  --light-surface: var(--color-surface);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --text-muted: var(--color-text-light);
  --border-color: #e2e8f0;
  --border-light: var(--color-border-light);
  
  /* Dark sidebar (optional - for non-admin layouts) */
  --dark-bg: #1a1d23;
  --dark-surface: #23272b;
  --dark-surface-light: #2c3034;
  
  /* ========================================================================
   * SHADOWS & RADIUS
   * ======================================================================== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06);
  
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Utility classes for theme colors */
.text-theme-primary { color: var(--color-primary) !important; }
.text-theme-secondary { color: var(--color-secondary) !important; }
.text-theme-accent { color: var(--color-accent) !important; }
.text-theme-warning { color: var(--color-warning) !important; }
.text-theme-error { color: var(--color-error) !important; }
.text-theme-muted { color: var(--color-text-muted) !important; }
.text-theme-heading { color: var(--color-text-heading) !important; }

.bg-theme-primary { background-color: var(--color-primary) !important; }
.bg-theme-secondary { background-color: var(--color-secondary) !important; }
.bg-theme-accent { background-color: var(--color-accent) !important; }
.bg-theme-warning { background-color: var(--color-warning) !important; }
.bg-theme-error { background-color: var(--color-error) !important; }

.border-theme-primary { border-color: var(--color-primary) !important; }
.border-theme-secondary { border-color: var(--color-secondary) !important; }
.border-theme-accent { border-color: var(--color-accent) !important; }
.border-theme-warning { border-color: var(--color-warning) !important; }
.border-theme-error { border-color: var(--color-error) !important; }