/* 
 * پالت رنگ‌های مدرن زاگرس پارت
 * طراحی شده برای سال 2025
 * سازگار با تمام مرورگرها
 */

/* ===============================
   MODERN COLOR PALETTE - پالت رنگ مدرن
   =============================== */

:root {
  /* 🔵 Primary Blues - آبی‌های اصلی */
  --brand-primary: #3b82f6;      /* آبی اصلی برند */
  --brand-primary-light: #60a5fa; /* آبی روشن */
  --brand-primary-dark: #1d4ed8;  /* آبی تیره */
  --brand-primary-50: #eff6ff;
  --brand-primary-100: #dbeafe;
  --brand-primary-900: #1e3a8a;

  /* 🟦 Neutrals - خاکستری‌های مدرن */
  --neutral-50: #f9fafb;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;

  /* 🟢 Success - سبز موفقیت */
  --success-primary: #10b981;
  --success-light: #34d399;
  --success-dark: #047857;
  --success-50: #ecfdf5;
  --success-100: #d1fae5;

  /* 🟡 Warning - نارنجی هشدار */
  --warning-primary: #f59e0b;
  --warning-light: #fbbf24;
  --warning-dark: #b45309;
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;

  /* 🔴 Error - قرمز خطا */
  --error-primary: #ef4444;
  --error-light: #f87171;
  --error-dark: #b91c1c;
  --error-50: #fef2f2;
  --error-100: #fee2e2;

  /* 🟣 Accent - بنفش لوکس */
  --accent-primary: #a855f7;
  --accent-light: #c084fc;
  --accent-dark: #7c3aed;
  --accent-50: #faf5ff;
  --accent-100: #f3e8ff;

  /* 🌟 Gold - طلایی پرمیوم */
  --gold-primary: #eab308;
  --gold-light: #fde047;
  --gold-dark: #a16207;
  --gold-50: #fffdf2;
  --gold-100: #fefce8;

  /* 📱 Surface Colors - رنگ‌های سطح */
  --surface-primary: #ffffff;
  --surface-secondary: #f9fafb;
  --surface-tertiary: #f3f4f6;
  --surface-overlay: rgba(31, 41, 55, 0.8);
  --surface-glass: rgba(255, 255, 255, 0.1);

  /* 📝 Text Colors - رنگ‌های متن */
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --text-inverse: #ffffff;
  --text-muted: #9ca3af;
  --text-brand: var(--brand-primary);
}

/* ===============================
   UTILITY CLASSES - کلاس‌های کمکی
   =============================== */

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

.bg-success { background-color: var(--success-primary); }
.bg-warning { background-color: var(--warning-primary); }
.bg-error { background-color: var(--error-primary); }
.bg-accent { background-color: var(--accent-primary); }
.bg-gold { background-color: var(--gold-primary); }

/* Text Colors */
.text-brand { color: var(--brand-primary); }
.text-success { color: var(--success-primary); }
.text-warning { color: var(--warning-primary); }
.text-error { color: var(--error-primary); }
.text-accent { color: var(--accent-primary); }
.text-gold { color: var(--gold-primary); }

/* Border Colors */
.border-brand { border-color: var(--brand-primary); }
.border-success { border-color: var(--success-primary); }
.border-warning { border-color: var(--warning-primary); }
.border-error { border-color: var(--error-primary); }
.border-accent { border-color: var(--accent-primary); }

/* ===============================
   GRADIENT COMBINATIONS - ترکیبات گرادیان
   =============================== */

.bg-gradient-brand {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
}

.bg-gradient-success {
  background: linear-gradient(135deg, var(--success-primary) 0%, var(--success-dark) 100%);
}

.bg-gradient-warning {
  background: linear-gradient(135deg, var(--warning-primary) 0%, var(--warning-dark) 100%);
}

.bg-gradient-accent {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-dark) 100%);
}

.bg-gradient-premium {
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--accent-primary) 100%);
}

.bg-gradient-surface {
  background: linear-gradient(135deg, var(--surface-primary) 0%, var(--surface-secondary) 100%);
}

/* ===============================
   SHADOW COLORS - سایه‌های رنگی
   =============================== */

.shadow-brand {
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
}

.shadow-brand-lg {
  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
}

.shadow-success {
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.2);
}

.shadow-warning {
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.2);
}

.shadow-accent {
  box-shadow: 0 10px 25px rgba(168, 85, 247, 0.2);
}

.shadow-gold {
  box-shadow: 0 10px 25px rgba(234, 179, 8, 0.2);
}

/* ===============================
   COMPONENT SPECIFIC COLORS - رنگ‌های کامپوننت‌ها
   =============================== */

/* Modern Buttons */
.btn-modern-primary {
  background: var(--brand-primary);
  color: var(--text-inverse);
  border: 1px solid var(--brand-primary);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-modern-primary:hover {
  background: var(--brand-primary-dark);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
  transform: translateY(-2px);
}

.btn-modern-success {
  background: var(--success-primary);
  color: var(--text-inverse);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2);
}

.btn-modern-success:hover {
  background: var(--success-dark);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

/* Modern Cards */
.card-modern {
  background: var(--surface-primary);
  border: 1px solid var(--neutral-200);
  box-shadow: 0 4px 6px rgba(107, 114, 128, 0.1);
  transition: all 0.3s ease;
}

.card-modern:hover {
  box-shadow: 0 20px 40px rgba(107, 114, 128, 0.15);
  transform: translateY(-4px);
}

.card-modern-featured {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: var(--text-inverse);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.25);
}

/* Modern Navigation */
.nav-modern {
  background: rgba(249, 250, 251, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--neutral-200);
  box-shadow: 0 4px 6px rgba(107, 114, 128, 0.1);
}

/* Modern Search */
.search-modern {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--neutral-200);
  box-shadow: 0 4px 14px rgba(107, 114, 128, 0.1);
  transition: all 0.3s ease;
}

.search-modern:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

/* ===============================
   DARK MODE SUPPORT - پشتیبانی حالت تاریک
   =============================== */

@media (prefers-color-scheme: dark) {
  :root {
    --surface-primary: var(--neutral-900);
    --surface-secondary: var(--neutral-800);
    --surface-tertiary: var(--neutral-700);
    --text-primary: var(--neutral-100);
    --text-secondary: var(--neutral-300);
    --text-tertiary: var(--neutral-400);
  }
}

/* ===============================
   ACCESSIBILITY - دسترسی‌پذیری
   =============================== */

@media (prefers-contrast: high) {
  :root {
    --brand-primary: #1d4ed8;
    --success-primary: #047857;
    --warning-primary: #b45309;
    --error-primary: #b91c1c;
  }
}

/* ===============================
   ANIMATION COLORS - رنگ‌های انیمیشن
   =============================== */

@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.shimmer {
  background: linear-gradient(90deg, 
    var(--neutral-200) 0%, 
    var(--neutral-100) 50%, 
    var(--neutral-200) 100%);
  background-size: 200px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes pulse-brand {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
}

.pulse-brand {
  animation: pulse-brand 2s infinite;
}

/* ===============================
   PRINT STYLES - استایل چاپ
   =============================== */

@media print {
  :root {
    --brand-primary: #000000;
    --text-primary: #000000;
    --text-secondary: #333333;
    --surface-primary: #ffffff;
  }
}