/**
 * ═══════════════════════════════════════════════════════════
 * 🎨 نظام الألوان المركزي للمشروع - Financial Wellness
 * ═══════════════════════════════════════════════════════════
 *
 * اللون الأساسي: #B4D3E6 (أزرق فاتح هادئ)
 *
 * جميع ألوان المشروع معرفة هنا كـ CSS Variables
 * لتسهيل التعديل والصيانة
 */

:root {
  /* ═══ اللون الأساسي (Primary Blue) ═══ */
  --primary: #B4D3E6;
  --primary-rgb: 180, 211, 230;

  /* ═══ تدرجات اللون الأساسي ═══ */
  --primary-dark: #8FBDD6;      /* أغمق للـ hover */
  --primary-darker: #6BA7C6;    /* أغمق للـ active */
  --primary-light: #C5DDED;     /* أفتح قليلاً */
  --primary-lighter: #D6E8F4;   /* أفتح للخلفيات */
  --primary-lightest: #EBF4FA;  /* أفتح جداً للخلفيات الخفيفة */

  /* ═══ تأثيرات اللون الأساسي ═══ */
  --primary-soft: rgba(180, 211, 230, 0.15);    /* خلفية خفيفة */
  --primary-light-bg: rgba(180, 211, 230, 0.08); /* خلفية أخف */
  --primary-hover-bg: rgba(180, 211, 230, 0.05); /* hover خفيف */
  --primary-shadow: rgba(180, 211, 230, 0.4);    /* ظل */
  --primary-focus-shadow: rgba(180, 211, 230, 0.25); /* تركيز */
  --primary-focus-ring: rgba(180, 211, 230, 0.2); /* حلقة تركيز */

  /* ═══ ألوان النص ═══ */
  --text-primary: #2d3436;      /* نص رئيسي داكن */
  --text-secondary: #111827;    /* نص ثانوي */
  --text-muted: #74808b;        /* نص باهت */
  --text-light: #9CA3AF;        /* نص فاتح */
  --text-placeholder: #9CA3AF;  /* placeholder */

  /* ═══ ألوان الخلفية ═══ */
  --bg-white: #ffffff;
  --bg-light: #f8f9fa;
  --bg-lighter: #f0f7fc;        /* خلفية فاتحة للبحث */
  --bg-gray: #f5f6f8;
  --bg-disabled: #e9ecef;

  /* ═══ ألوان الحدود ═══ */
  --border-color: #e5e7eb;
  --border-light: #f1f3f6;
  --border-focus: var(--primary);
  --border-hover: rgba(180, 211, 230, 0.6);

  /* ═══ ألوان الحالات (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.08);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 12px 35px rgba(180, 211, 230, 0.15), 0 2px 12px rgba(0, 0, 0, 0.04);
  --shadow-primary: 0 0 8px 2px rgba(180, 211, 230, 0.55);
  --shadow-car: 0 2px 4px rgba(0, 0, 0, 0.15);

  /* ═══ ألوان التدرجات (Gradients) ═══ */
  --gradient-sidebar: linear-gradient(180deg, #ffffff 0%, #f0f7fc 100%);
  --gradient-primary: linear-gradient(180deg, #B4D3E6 0%, #8FBDD6 100%);
  --gradient-primary-soft: linear-gradient(180deg, #D6E8F4 0%, #B4D3E6 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);
 *
 * ═══════════════════════════════════════════════════════════
 */