/* ============================================================
   assets/css/variables.css — متغيرات CSS الإلزامية
   موقع نوف للديكورات
   ============================================================ */

:root {
  /* الألوان الأساسية */
  --color-primary:        #0F3D2E;   /* أخضر مدني عميق */
  --color-primary-dark:   #0A2B20;   /* أغمق للـ hover */
  --color-primary-light:  #1A5C44;   /* أفتح للتدرجات */

  /* الألوان الثانوية */
  --color-secondary:      #B08D57;   /* ذهبي/برونزي فاخر */
  --color-secondary-light:#C9A876;   /* ذهبي أفتح للـ hover */
  --color-secondary-dark: #8B6D3F;   /* ذهبي أغمق */

  /* الخلفيات */
  --color-bg:             #F7F3EC;   /* بيج دافئ/عاجي */
  --color-bg-alt:         #FFFFFF;   /* أبيض نقي للبطاقات */
  --color-bg-dark:        #0F3D2E;   /* خلفية داكنة (Footer) */
  --color-bg-section:     #EDE9E0;   /* خلفية أقسام بديلة */

  /* النصوص */
  --color-text:           #232323;   /* رمادي فحمي */
  --color-text-muted:     #5B5B5B;   /* نص ثانوي */
  --color-text-light:     #8A8A8A;   /* نص خافت */
  --color-text-white:     #FFFFFF;   /* نص أبيض */
  --color-text-gold:      #B08D57;   /* نص ذهبي */

  /* التأكيد والحدود */
  --color-accent:         #7A8B69;   /* أخضر زيتي فاتح */
  --color-border:         #E4DDCF;   /* حدود دافئة */
  --color-border-dark:    #C9BFA8;   /* حدود أغمق */

  /* التنبيهات */
  --color-success:        #2D7A4F;
  --color-danger:         #C0392B;
  --color-warning:        #D4A017;
  --color-info:           #1A6B8A;

  /* الخطوط */
  --font-heading: 'IBM Plex Sans Arabic', 'Tajawal', 'Almarai', sans-serif;
  --font-body:    'Tajawal', 'Almarai', 'IBM Plex Sans Arabic', sans-serif;

  /* الحجوم */
  --fs-xs:    0.75rem;   /* 12px */
  --fs-sm:    0.875rem;  /* 14px */
  --fs-base:  1rem;      /* 16px */
  --fs-md:    1.125rem;  /* 18px */
  --fs-lg:    1.25rem;   /* 20px */
  --fs-xl:    1.5rem;    /* 24px */
  --fs-2xl:   1.875rem;  /* 30px */
  --fs-3xl:   2.25rem;   /* 36px */
  --fs-4xl:   3rem;      /* 48px */
  --fs-5xl:   3.75rem;   /* 60px */

  /* الحواف */
  --radius-sm:   6px;
  --radius-base: 10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   30px;
  --radius-full: 9999px;

  /* الظلال */
  --shadow-soft:   0 4px 20px rgba(15, 61, 46, .08);
  --shadow-md:     0 8px 30px rgba(15, 61, 46, .12);
  --shadow-lg:     0 16px 50px rgba(15, 61, 46, .16);
  --shadow-gold:   0 4px 20px rgba(176, 141, 87, .25);

  /* التحريك */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* المسافات */
  --space-section: 5rem;
  --space-section-sm: 3rem;

  /* الحاوية */
  --container-max: 1280px;

  /* z-index */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-modal:    1050;
  --z-tooltip:  1080;
}

/* ============================================================
   Media Query Helpers
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --space-section:    3rem;
    --space-section-sm: 2rem;
    --fs-4xl: 2.25rem;
    --fs-5xl: 2.75rem;
  }
}