/*
design-tokens.css
------------------
كل ألوان وخطوط ومسافات التصميم كمتغيرات CSS واحدة، مستخرجة من ملف React
المرفق (index.html) حتى تبقى متطابقة بكل الملفات ومركزية للتعديل لاحقًا.
*/

:root {
  /* ألوان أساسية */
  --mlb-cream:        #FAF7F1; /* خلفية الموقع العامة */
  --mlb-white-warm:    #FFFDFB; /* خلفية بطاقات/أقسام فاتحة */
  --mlb-ink:            #1E1712; /* أسود دافئ: الهيدر، الأزرار الرئيسية، العناوين */
  --mlb-ink-2:          #1B1815; /* درجة أغمق بديلة (hover) */
  --mlb-text-light:    #EDE6D6; /* نص فاتح فوق خلفية داكنة (الهيدر) */
  --mlb-gold:           #B08D57; /* اللون المميز للبراند (الذهبي/البرونزي) */
  --mlb-gold-dark:     #8A6D2E; /* hover/active على الذهبي */

  /* نصوص ثانوية */
  --mlb-text-muted:    #5A4F42;
  --mlb-text-muted-2:  #7A6F60;
  --mlb-text-muted-3:  #9A9186;
  --mlb-text-brown:    #3A2E23;

  /* حالات */
  --mlb-success:        #2E6B4F; /* متوفر بالمخزون */
  --mlb-error:          #A32D2D; /* غير متوفر / خطأ */
  --mlb-sale:           #8B5E3C; /* شارة تخفيض */

  /* حدود وخلفيات فاتحة */
  --mlb-border:         rgba(30,23,18,0.12);
  --mlb-border-soft:    #D9CFBE;
  --mlb-bg-soft:        #F3EEE4;

  /* أبعاد */
  --mlb-radius-sm:      2px;
  --mlb-radius-md:      4px;
  --mlb-container:      1280px;
  --mlb-header-h:       76px;

  /* خطوط: عربي مقابل إنكليزي (نبدّلهم عبر [lang] بالأسفل) */
  --mlb-font-body:       'Inter', system-ui, sans-serif;
  --mlb-font-display:    'Cormorant Garamond', Georgia, serif;
}

html[lang="ar"],
body.rtl {
  --mlb-font-body:       'Cairo', system-ui, sans-serif;
  --mlb-font-display:    'Amiri', 'Cairo', serif;
}

body {
  background: var(--mlb-cream);
  color: var(--mlb-ink);
  font-family: var(--mlb-font-body);
}

.mlb-display {
  font-family: var(--mlb-font-display);
}