/* ============================================
   Somy Brand Identity v1.0
   منصة سَومي - صيد العروض السعودية
   ============================================ */

:root {
  /* ========== الألوان الرئيسية (Primary) ========== */
  --somy-navy: #1B2845;        /* الكحلي العميق - اللون الأساسي */
  --somy-cream: #F5EFE0;       /* البيج الكريمي - اللون الثانوي */
  --somy-gold: #C9A961;        /* الذهبي الراقي - لون التأكيد */

  /* ========== الألوان الداعمة (Secondary) ========== */
  --somy-white: #FFFFFF;
  --somy-black: #1A1A1A;
  --somy-light-gray: #E8E2D0;
  --somy-medium-gray: #8B8578;

  /* ========== ألوان الحالات (Functional) ========== */
  --somy-success: #2D6A4F;     /* أخضر - متوفر، تم التأكيد */
  --somy-warning: #E76F51;     /* برتقالي - تنبيه، صفقة محدودة */
  --somy-danger: #C73E1D;      /* أحمر - نفد المخزون، خطر */
  --somy-info: #3D5A80;        /* أزرق - معلومات، روابط */

  /* ========== الخطوط (Typography) ========== */
  --font-arabic: 'Tajawal', sans-serif;
  --font-latin: 'Inter', sans-serif;

  /* ========== أحجام الخطوط ========== */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 48px;
  --text-4xl: 64px;

  /* ========== المسافات (Spacing) ========== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ========== الحواف (Border Radius) ========== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ========== الظلال (Shadows) ========== */
  --shadow-sm: 0 1px 2px rgba(27, 40, 69, 0.05);
  --shadow-md: 0 4px 6px rgba(27, 40, 69, 0.1);
  --shadow-lg: 0 10px 15px rgba(27, 40, 69, 0.15);
  --shadow-xl: 0 20px 25px rgba(27, 40, 69, 0.2);
}

/* الخطوط تُحمَّل عبر <link> في رأس HTML للأداء — انظر index.html */

/* ========== الإعدادات العامة ========== */
body {
  font-family: var(--font-arabic);
  background: var(--somy-cream);
  color: var(--somy-navy);
  direction: rtl;
}

/* النصوص الإنجليزية تستخدم خط Inter */
[lang="en"], .en {
  font-family: var(--font-latin);
  direction: ltr;
}

/* ========== أمثلة جاهزة للاستخدام ========== */

/* زر رئيسي - Primary Button */
.btn-primary {
  background: var(--somy-navy);
  color: var(--somy-cream);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  border: none;
  font-family: var(--font-arabic);
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: var(--somy-gold);
  color: var(--somy-navy);
}

/* زر ذهبي - CTA Button */
.btn-cta {
  background: var(--somy-gold);
  color: var(--somy-navy);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  border: none;
  font-weight: 700;
  font-size: var(--text-lg);
}

/* بطاقة عرض */
.deal-card {
  background: var(--somy-white);
  border: 1px solid var(--somy-light-gray);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.deal-card:hover {
  border-color: var(--somy-gold);
  box-shadow: var(--shadow-md);
}

/* السعر الجديد */
.deal-price-new {
  color: var(--somy-navy);
  font-size: var(--text-2xl);
  font-weight: 700;
}

/* السعر القديم - مشطوب */
.deal-price-old {
  color: var(--somy-medium-gray);
  font-size: var(--text-base);
  text-decoration: line-through;
}

/* نسبة التوفير */
.deal-savings {
  color: var(--somy-gold);
  font-weight: 700;
  font-size: var(--text-lg);
}

/* شارات الحالة */
.badge-available {
  background: var(--somy-success);
  color: var(--somy-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
}

.badge-sold-out {
  background: var(--somy-danger);
  color: var(--somy-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
}

.badge-warning {
  background: var(--somy-warning);
  color: var(--somy-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* العنوان الرئيسي */
.heading-1 {
  font-family: var(--font-arabic);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--somy-navy);
  line-height: 1.2;
}

.heading-2 {
  font-family: var(--font-arabic);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--somy-navy);
}

/* النص الذهبي للتأكيد */
.text-gold {
  color: var(--somy-gold);
  font-weight: 600;
}