/**
 * Tech4Pack Color Theme
 * Central color management for easy theme modifications
 * 
 * Usage: Include this file in HTML head section:
 * <link rel="stylesheet" href="css/theme-colors.css">
 */

:root {
  /* Primary Brand Colors */
  --primary-green-50: #f0fdf4;
  --primary-green-100: #dcfce7;
  --primary-green-200: #bbf7d0;
  --primary-green-300: #86efac;
  --primary-green-400: #4ade80;
  --primary-green-500: #22c55e;
  --primary-green-600: #16a34a;
  --primary-green-700: #15803d;
  --primary-green-800: #166534;
  --primary-green-900: #14532d;

  /* Emerald Color Palette (Main Theme) */
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-900: #064e3b;

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

  /* White with Opacity */
  --white-90: rgba(255, 255, 255, 0.90);
  --white-95: rgba(255, 255, 255, 0.95);
  --white-80: rgba(255, 255, 255, 0.80);
  --white-70: rgba(255, 255, 255, 0.70);
  --white-60: rgba(255, 255, 255, 0.60);
  --white-50: rgba(255, 255, 255, 0.50);

  /* Theme-Specific Semantic Colors */
  --theme-primary: var(--emerald-600);
  --theme-primary-hover: var(--emerald-700);
  --theme-primary-light: var(--emerald-500);
  --theme-secondary: var(--emerald-700);
  --theme-accent: var(--emerald-500);
  
  /* Text Colors */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted: var(--gray-600);
  --text-light: var(--gray-500);
  --text-white: #ffffff;
  
  /* Background Colors */
  --bg-primary: var(--gray-100);
  --bg-secondary: var(--gray-50);
  --bg-card: var(--white-80);
  --bg-card-hover: var(--white-95);
  
  /* Border Colors */
  --border-light: rgba(209, 213, 219, 0.60); /* gray-300/60 */
  --border-primary: var(--emerald-400);
  --border-primary-hover: var(--emerald-500);
  
  /* Shadow Colors */
  --shadow-emerald-500: rgba(16, 185, 129, 0.30);
  --shadow-emerald-600: rgba(5, 150, 105, 0.30);
  --shadow-emerald-700: rgba(4, 120, 87, 0.30);
  --shadow-green-500: rgba(34, 197, 94, 0.30);
  --shadow-green-600: rgba(22, 163, 74, 0.30);
  
  /* Animation Colors */
  --glow-start: rgba(34, 197, 94, 0.4);
  --glow-end: rgba(34, 197, 94, 0.7);
  
  /* Gradient Stops */
  --gradient-green-start: var(--emerald-600);
  --gradient-green-mid: var(--emerald-700);
  --gradient-green-end: var(--emerald-800);
  
  /* Background Gradient */
  --bg-gradient-start: var(--gray-100);
  --bg-gradient-mid: var(--gray-50);
  --bg-gradient-end: var(--gray-200);
}

/* Utility Classes for Quick Theme Application */
.theme-bg-primary { background-color: var(--theme-primary); }
.theme-bg-secondary { background-color: var(--theme-secondary); }
.theme-text-primary { color: var(--theme-primary); }
.theme-text-secondary { color: var(--theme-secondary); }
.theme-border-primary { border-color: var(--theme-primary); }

/* Gradient Backgrounds */
.theme-gradient-primary {
  background: linear-gradient(to right, var(--gradient-green-start), var(--gradient-green-mid));
}

.theme-gradient-secondary {
  background: linear-gradient(to right, var(--gradient-green-mid), var(--gradient-green-end));
}

.theme-gradient-text {
  background: linear-gradient(to right, var(--gradient-green-start), var(--gradient-green-mid));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Button Themes */
.btn-theme-primary {
  background: linear-gradient(to right, var(--gradient-green-start), var(--gradient-green-mid));
  color: var(--text-white);
}

.btn-theme-primary:hover {
  background: linear-gradient(to right, var(--gradient-green-mid), var(--gradient-green-end));
}

.btn-theme-secondary {
  border: 2px solid var(--theme-primary);
  color: var(--theme-primary);
  background: transparent;
}

.btn-theme-secondary:hover {
  background: var(--theme-primary);
  color: var(--text-white);
}

/* Card Themes */
.card-theme {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-light);
}

.card-theme:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-primary);
}

/* Header Theme */
.header-theme {
  background: var(--white-95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-light);
}

/* Navigation Link Theme */
.nav-link-theme {
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

.nav-link-theme:hover {
  color: var(--theme-primary);
}

/* Animation Glow Effect */
.animate-glow-theme {
  animation: glowTheme 2s ease-in-out infinite alternate;
}

@keyframes glowTheme {
  0% { box-shadow: 0 0 20px var(--glow-start); }
  100% { box-shadow: 0 0 30px var(--glow-end); }
}

/* Shadow Utilities */
.shadow-theme-sm {
  box-shadow: 0 1px 2px 0 var(--shadow-emerald-500);
}

.shadow-theme-md {
  box-shadow: 0 4px 6px -1px var(--shadow-emerald-500);
}

.shadow-theme-lg {
  box-shadow: 0 10px 15px -3px var(--shadow-emerald-500);
}

.shadow-theme-xl {
  box-shadow: 0 20px 25px -5px var(--shadow-emerald-500);
}

/* Icon Theme Colors */
.icon-theme-primary {
  color: var(--theme-primary);
}

.icon-theme-secondary {
  color: var(--theme-secondary);
}

/* Background Pattern Theme */
.bg-pattern-theme {
  background: linear-gradient(to bottom right, var(--bg-gradient-start), var(--bg-gradient-mid), var(--bg-gradient-end));
}

/* Custom Properties for Dynamic Theming */
.theme-dynamic {
  --dynamic-primary: var(--theme-primary);
  --dynamic-secondary: var(--theme-secondary);
  --dynamic-accent: var(--theme-accent);
}

/* Theme Variations for Easy Switching */
.theme-blue {
  --theme-primary: #3b82f6; /* blue-500 */
  --theme-primary-hover: #2563eb; /* blue-600 */
  --theme-secondary: #1d4ed8; /* blue-700 */
}

.theme-purple {
  --theme-primary: #8b5cf6; /* violet-500 */
  --theme-primary-hover: #7c3aed; /* violet-600 */
  --theme-secondary: #6d28d9; /* violet-700 */
}

.theme-red {
  --theme-primary: #ef4444; /* red-500 */
  --theme-primary-hover: #dc2626; /* red-600 */
  --theme-secondary: #b91c1c; /* red-700 */
}

/* Print Styles */
@media print {
  :root {
    --theme-primary: #000000;
    --theme-secondary: #666666;
    --text-primary: #000000;
    --text-secondary: #333333;
  }
}