/* =========================================
   دار المحبرة — متغيرات التصميم
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Tajawal:wght@300;400;500;700;900&display=swap');

:root {
  /* --- الألوان الأساسية --- */
  --color-sage:        #8FA28A;   /* أخضر مريمية — للتمييز والحدود النشطة */
  --color-sage-light:  #C7D3C0;   /* أخضر فاتح — خلفيات البطاقات والأقسام */
  --color-cream:       #F7F4ED;   /* كريمي — الخلفية الرئيسية */
  --color-gold:        #C8A96B;   /* ذهبي — التمييز والعلامات والأسعار */

  /* --- درجات مشتقة --- */
  --color-sage-dark:   #6B8065;   /* للنصوص على الخلفية الفاتحة */
  --color-sage-darker: #3F5A3C;   /* للنصوص الثقيلة */
  --color-gold-dark:   #A07C3A;   /* ذهبي غامق للتظليل */
  --color-gold-light:  #EDD9A3;   /* ذهبي فاتح للخلفية */
  --color-ink:         #1C2318;   /* حبر — النصوص الرئيسية */
  --color-ink-soft:    #3D4A39;   /* حبر ناعم — نصوص ثانوية */
  --color-ink-muted:   #6B7A66;   /* حبر خافت — نصوص توضيحية */
  --color-white:       #FFFFFF;
  --color-shadow:      rgba(28, 35, 24, 0.08);
  --color-shadow-md:   rgba(28, 35, 24, 0.14);
  --color-shadow-lg:   rgba(28, 35, 24, 0.20);

  /* --- الخلفيات --- */
  --bg-page:           var(--color-cream);
  --bg-card:           var(--color-white);
  --bg-section:        var(--color-sage-light);
  --bg-header:         #FFFFFF;
  --bg-footer:         var(--color-ink);

  /* --- الحدود --- */
  --border-subtle:     1px solid rgba(143, 162, 138, 0.25);
  --border-card:       1px solid rgba(143, 162, 138, 0.20);
  --border-active:     2px solid var(--color-sage);
  --border-gold:       1px solid rgba(200, 169, 107, 0.40);

  /* --- الخطوط --- */
  --font-display:      'Tajawal', sans-serif;       /* العناوين الكبيرة */
  --font-body:         'IBM Plex Sans Arabic', sans-serif; /* النصوص والواجهة */

  /* --- مقياس الخط --- */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.875rem;   /* 30px */
  --text-3xl:   2.25rem;    /* 36px */

  /* --- الوزن --- */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   900;

  /* --- ارتفاع السطر --- */
  --leading-tight:  1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* --- المسافات --- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;

  /* --- نصف الأقطار --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --- الظلال --- */
  --shadow-sm:  0 1px 3px var(--color-shadow);
  --shadow-md:  0 4px 12px var(--color-shadow-md);
  --shadow-lg:  0 8px 24px var(--color-shadow-lg);
  --shadow-card:0 2px 8px var(--color-shadow), 0 0 0 1px rgba(143,162,138,0.12);

  /* --- الانتقالات --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* --- أبعاد الهيدر --- */
  --header-height:     64px;
  --header-height-lg:  72px;

  /* --- أقصى عرض --- */
  --max-width:         1400px;
  --content-width:     1200px;

  /* --- الشبكة --- */
  --grid-gap:    var(--space-4);
  --grid-gap-lg: var(--space-6);
}

/* =========================================
   Reduced Motion
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}