/* ============================================================
   🎨 متغيرات CSS — نبراسي v6
   ============================================================
   جميع القيم المرجعية المشتركة بين ملفات CSS المختلفة.
   عدّل هنا فقط، وستنعكس التغييرات تلقائياً في كل مكان.
   ============================================================ */

:root {

  /* ─────────────────────── الألوان الأساسية ─────────────────────── */
  /* Green-Teal عميق — ثقة واستقرار */
  --color-primary:       #1B4B43;
  --color-primary-light: #2F6F63;
  --color-primary-dark:  #123832;

  /* كحلي داكن — للشريط الجانبي */
  --color-navy:          #0D2137;
  --color-navy-light:    #1A3452;

  /* ذهبي دافئ — تمييز واحتفاء */
  --color-accent:        #C9A24B;
  --color-accent-light:  #E4C878;
  --color-accent-dark:   #A07830;

  /* أخضر سيج فاتح — ثانوي */
  --color-secondary:     #8FA998;
  --color-secondary-light: #B2C4BB;

  /* الخلفيات والأسطح */
  --color-bg:            #F7F4ED;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F0ECE2;
  --color-surface-3:     #E8E4DA;

  /* النصوص */
  --color-text:          #23302C;
  --color-text-muted:    #6B7770;
  --color-text-light:    #9BA8A4;
  --color-text-inverse:  #FFFFFF;

  /* الحدود */
  --color-border:        #E4DFD2;
  --color-border-focus:  var(--color-accent);

  /* الحالات */
  --color-danger:        #B5473A;
  --color-danger-light:  #FBEEEC;
  --color-success:       #3E7A5D;
  --color-success-light: #EAF4EE;
  --color-warning:       #D4821A;
  --color-info:          #2B72A8;
  --color-whatsapp:      #25D366;

  /* ─────────────────────── الخطوط ─────────────────────── */
  /* Readex Pro: يدعم العربية والإنجليزية بشكل ممتاز */
  --font-display: "Readex Pro", "Cairo", "Tahoma", sans-serif;
  --font-body:    "Readex Pro", "Tajawal", "Tahoma", sans-serif;
  --font-utility: "Readex Pro", "IBM Plex Sans Arabic", "Tahoma", sans-serif;

  /* ─────────────────────── الأبعاد ─────────────────────── */
  --sidebar-width:      260px;
  --sidebar-collapsed:   72px;
  --bottom-nav-height:   68px;
  --header-height:       60px;
  --fab-size:            52px;

  /* ─────────────────────── المسافات ─────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* ─────────────────────── الحواف والظلال ─────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(27, 75, 67, 0.06);
  --shadow-md: 0 8px 24px rgba(27, 75, 67, 0.10);
  --shadow-lg: 0 16px 40px rgba(27, 75, 67, 0.14);
  --shadow-xl: 0 24px 60px rgba(27, 75, 67, 0.18);

  /* ─────────────────────── الحركة والانتقالات ─────────────────────── */
  --transition-fast:   0.18s ease;
  --transition-base:   0.28s ease;
  --transition-slow:   0.42s ease;
  --transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─────────────────────── حلقة التركيز (Accessibility) ─────────────────────── */
  --focus-ring:        3px solid var(--color-accent);
  --focus-ring-offset: 2px;

  /* ─────────────────────── مراحل التعلم (العنصر البصري المميز) ─────────────────────── */
  --stage-1: var(--color-accent);
  --stage-2: var(--color-secondary);
  --stage-3: var(--color-accent);
  --stage-4: var(--color-secondary);

  /* ─────────────────────── z-index Stack ─────────────────────── */
  --z-base:       0;
  --z-raised:    10;
  --z-dropdown:  30;
  --z-sidebar:   40;
  --z-header:    45;
  --z-nav:       50;
  --z-overlay:   60;
  --z-modal:     70;
  --z-toast:     80;
  --z-tooltip:   90;
}

/* ─────────────────────── الوضع الداكن (مستقبلي) ─────────────────────── */
/* @media (prefers-color-scheme: dark) { :root { ... } } */

/* ─────────────────────── تقليل الحركة (a11y) ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.001ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:      0.001ms !important;
    scroll-behavior:          auto    !important;
  }
}