/**
 * ═══════════════════════════════════════════════════════════
 * 🎨 نظام الألوان المركزي للمشروع - 7Jewels
 * ═══════════════════════════════════════════════════════════
 * 
 * اللون الأساسي: #e3b34f (ذهبي)
 * 
 * جميع ألوان المشروع معرفة هنا كـ CSS Variables
 * لتسهيل التعديل والصيانة
 */

:root {
  /* ═══ اللون الأساسي (Primary Gold) ═══ */
  --primary: #e3b34f;
  --primary-rgb: 227, 179, 79;
  
  /* ═══ تدرجات اللون الأساسي ═══ */
  --primary-dark: #c9963d;      /* أغمق للـ hover */
  --primary-darker: #b08535;    /* أغمق للـ active */
  --primary-light: #e8c26d;     /* أفتح قليلاً */
  --primary-lighter: #f0d28f;   /* أفتح للخلفيات */
  --primary-lightest: #f8e8c1;  /* أفتح جداً للخلفيات الخفيفة */
  
  /* ═══ تأثيرات اللون الأساسي ═══ */
  --primary-soft: rgba(227, 179, 79, 0.12);    /* خلفية خفيفة */
  --primary-light-bg: rgba(227, 179, 79, 0.08); /* خلفية أخف */
  --primary-hover-bg: rgba(227, 179, 79, 0.045); /* hover خفيف */
  --primary-shadow: rgba(227, 179, 79, 0.3);    /* ظل */
  --primary-focus-shadow: rgba(227, 179, 79, 0.15); /* تركيز */
  --primary-focus-ring: rgba(227, 179, 79, 0.14); /* حلقة تركيز */
  
  /* ═══ ألوان النص ═══ */
  --text-primary: #2d3436;      /* نص رئيسي داكن */
  --text-secondary: #111827;    /* نص ثانوي */
  --text-muted: #74808b;        /* نص باهت */
  --text-light: #9CA3AF;        /* نص فاتح */
  --text-placeholder: #9CA3AF;  /* placeholder */
  
  /* ═══ ألوان الخلفية ═══ */
  --bg-white: #ffffff;
  --bg-light: #f8f9fa;
  --bg-lighter: #f0fdf4;        /* خلفية فاتحة للبحث */
  --bg-gray: #f5f6f8;
  --bg-disabled: #e9ecef;
  
  /* ═══ ألوان الحدود ═══ */
  --border-color: #e5e7eb;
  --border-light: #f1f3f6;
  --border-focus: var(--primary);
  --border-hover: rgba(227, 179, 79, 0.55);
  
  /* ═══ ألوان الحالات (States) ═══ */
  --success: #22c55e;
  --success-light: #86efac;
  --danger: #dc3545;
  --danger-rgb: 220, 53, 69;
  --warning: #ffc107;
  --info: #17a2b8;
  
  /* ═══ ألوان الظلال ═══ */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 12px 35px rgba(227, 179, 79, 0.08), 0 2px 12px rgba(0, 0, 0, 0.02);
  --shadow-primary: 0 0 8px 2px rgba(227, 179, 79, 0.6);
  --shadow-car: 0 2px 4px rgba(0, 0, 0, 0.2);
  
  /* ═══ ألوان التدرجات (Gradients) ═══ */
  --gradient-sidebar: linear-gradient(180deg, #ffffff 0%, #fefdfb 100%);
  --gradient-primary: linear-gradient(180deg, #e3b34f 0%, #c9963d 100%);
  --gradient-primary-soft: linear-gradient(180deg, #f0d28f 0%, #e3b34f 100%);
  
  /* ═══ أحجام وأبعاد ═══ */
  --input-height-sm: 38px;
  --input-height-md: 40.5px;
  --input-height-lg: 46px;
  --border-radius: 8px;
  --border-radius-sm: 6px;
  --border-radius-lg: 10px;
  
  /* ═══ أوقات التحريك ═══ */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-smooth: 0.3s ease;
  
  /* ═══ Z-Index Layers ═══ */
  --z-dropdown: 1050;
  --z-dropdown-high: 10000;
  --z-sidebar: 1000;
  --z-header: 999;
  --z-footer: 999;
  --z-overlay: 1040;
}

/* ═══════════════════════════════════════════════════════════
 * 🎨 أمثلة للاستخدام:
 * ═══════════════════════════════════════════════════════════
 * 
 * للأزرار:
 *   background-color: var(--primary);
 *   color: var(--bg-white);
 * 
 * للـ hover:
 *   background-color: var(--primary-dark);
 * 
 * للـ focus:
 *   border-color: var(--border-focus);
 *   box-shadow: 0 0 0 3px var(--primary-focus-shadow);
 * 
 * للخلفيات الخفيفة:
 *   background: var(--primary-soft);
 * 
 * للنصوص:
 *   color: var(--text-primary);
 * 
 * ═══════════════════════════════════════════════════════════
 */