/* =============================================================
   DAU Design System — ألوان مستوحاة من kime.ai
   الملف: /assets/css/dau-design.css
   الاستخدام: أضف الكلاسات تدريجياً، الأنماط القديمة لا تتأثر
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   1. CSS VARIABLES — متغيرات النظام
   ───────────────────────────────────────────────────────────── */
:root {

  /* --- الألوان الأساسية --- */
  --dau-bg:           #F0EDE6;   /* خلفية الصفحة — كريمي دافئ */
  --dau-bg-card:      #FFFFFF;   /* خلفية الكروت والويدجتس */
  --dau-bg-section:   #1E3D2F;   /* خلفية الـ CTA والسيكشنز الداكنة */
  --dau-bg-footer:    #0D1510;   /* خلفية الفوتر */

  /* --- ألوان النصوص --- */
  --dau-text-heading: #1C1C1C;   /* العناوين */
  --dau-text-body:    #555555;   /* النص العادي */
  --dau-text-muted:   #888888;   /* النص الثانوي / التعليقات */
  --dau-text-light:   #FFFFFF;   /* النص على الخلفيات الداكنة */
  --dau-text-accent:  #3D6B4A;   /* النص المميز / الأخضر */

  /* --- اللون المميز (Accent) --- */
  --dau-accent:       #3D6B4A;   /* أخضر غابي */
  --dau-accent-hover: #2D5A39;   /* أخضر غابي داكن للـ hover */
  --dau-accent-light: #C8DDCC;   /* أخضر فاتح للـ badges */
  --dau-accent-muted: #6B9E7A;   /* أخضر وسط */

  /* --- الزر الرئيسي --- */
  --dau-btn-bg:       #1C1C1C;   /* خلفية الزر الرئيسي */
  --dau-btn-hover:    #333333;   /* hover الزر الرئيسي */
  --dau-btn-text:     #FFFFFF;   /* نص الزر الرئيسي */

  /* --- مؤشرات البيانات --- */
  --dau-positive:     #4CAF50;   /* إيجابي — أخضر */
  --dau-negative:     #E53935;   /* سلبي — أحمر */
  --dau-neutral:      #9E9E9E;   /* محايد — رمادي */

  /* --- الحدود والظلال --- */
  --dau-border:       #E0DADA;
  --dau-border-dark:  #2D4A38;
  --dau-shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --dau-shadow-md:    0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --dau-shadow-lg:    0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);

  /* --- الانحناءات --- */
  --dau-radius-sm:   6px;
  --dau-radius-md:   12px;
  --dau-radius-lg:   20px;
  --dau-radius-pill: 999px;

  /* --- الخطوط --- */
  --dau-font-ar: 'Cairo', 'Tajawal', 'IBM Plex Arabic', sans-serif;
  --dau-font-en: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- أحجام النصوص --- */
  --dau-text-xs:   0.75rem;    /* 12px */
  --dau-text-sm:   0.875rem;   /* 14px */
  --dau-text-base: 1rem;       /* 16px */
  --dau-text-lg:   1.125rem;   /* 18px */
  --dau-text-xl:   1.25rem;    /* 20px */
  --dau-text-2xl:  1.5rem;     /* 24px */
  --dau-text-3xl:  1.875rem;   /* 30px */
  --dau-text-4xl:  2.25rem;    /* 36px */

  /* --- أوزان الخطوط --- */
  --dau-weight-normal:   400;
  --dau-weight-medium:   500;
  --dau-weight-semibold: 600;
  --dau-weight-bold:     700;

  /* --- المسافات --- */
  --dau-space-xs:  0.5rem;    /*  8px */
  --dau-space-sm:  1rem;      /* 16px */
  --dau-space-md:  1.5rem;    /* 24px */
  --dau-space-lg:  2rem;      /* 32px */
  --dau-space-xl:  3rem;      /* 48px */
  --dau-space-2xl: 5rem;      /* 80px */

  /* --- الانتقالات --- */
  --dau-transition: 0.2s ease;
}


/* ─────────────────────────────────────────────────────────────
   2. RESET HELPERS — قواعد أساسية
   ───────────────────────────────────────────────────────────── */
.dau-wrap {
  box-sizing: border-box;
}
.dau-wrap *,
.dau-wrap *::before,
.dau-wrap *::after {
  box-sizing: inherit;
}


/* ─────────────────────────────────────────────────────────────
   3. BACKGROUND UTILITIES — خلفيات
   ───────────────────────────────────────────────────────────── */
.dau-bg-page    { background-color: var(--dau-bg); }
.dau-bg-card    { background-color: var(--dau-bg-card); }
.dau-bg-dark    { background-color: var(--dau-bg-section); }
.dau-bg-footer  { background-color: var(--dau-bg-footer); }
.dau-bg-accent  { background-color: var(--dau-accent); }


/* ─────────────────────────────────────────────────────────────
   4. TEXT UTILITIES — نصوص
   ───────────────────────────────────────────────────────────── */
.dau-text-heading { color: var(--dau-text-heading); }
.dau-text-body    { color: var(--dau-text-body); }
.dau-text-muted   { color: var(--dau-text-muted); }
.dau-text-light   { color: var(--dau-text-light); }
.dau-text-accent  { color: var(--dau-text-accent); }
.dau-text-positive{ color: var(--dau-positive); }
.dau-text-negative{ color: var(--dau-negative); }


/* ─────────────────────────────────────────────────────────────
   5. BUTTONS — أزرار
   ───────────────────────────────────────────────────────────── */

/* الزر الرئيسي — داكن pill */
.dau-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  padding:         0.65rem 1.5rem;
  background-color:var(--dau-btn-bg);
  color:           var(--dau-btn-text);
  font-size:       var(--dau-text-sm);
  font-weight:     var(--dau-weight-semibold);
  border:          none;
  border-radius:   var(--dau-radius-pill);
  cursor:          pointer;
  text-decoration: none;
  transition:      background-color var(--dau-transition),
                   transform var(--dau-transition),
                   box-shadow var(--dau-transition);
  white-space:     nowrap;
}
.dau-btn:hover {
  background-color: var(--dau-btn-hover);
  box-shadow:       var(--dau-shadow-md);
  transform:        translateY(-1px);
  color:            var(--dau-btn-text);
  text-decoration:  none;
}
.dau-btn:active {
  transform: translateY(0);
}

/* زر أخضر — accent */
.dau-btn-accent {
  background-color: var(--dau-accent);
}
.dau-btn-accent:hover {
  background-color: var(--dau-accent-hover);
}

/* زر outline — إطار فقط */
.dau-btn-outline {
  background-color: transparent;
  color:            var(--dau-btn-bg);
  border:           1.5px solid var(--dau-btn-bg);
}
.dau-btn-outline:hover {
  background-color: var(--dau-btn-bg);
  color:            var(--dau-btn-text);
}

/* زر outline أبيض — على الخلفيات الداكنة */
.dau-btn-outline-light {
  background-color: transparent;
  color:            var(--dau-text-light);
  border:           1.5px solid rgba(255,255,255,.5);
}
.dau-btn-outline-light:hover {
  background-color: rgba(255,255,255,.1);
  border-color:     var(--dau-text-light);
  color:            var(--dau-text-light);
}

/* حجم كبير */
.dau-btn-lg {
  padding:   0.8rem 2rem;
  font-size: var(--dau-text-base);
}

/* حجم صغير */
.dau-btn-sm {
  padding:   0.4rem 1rem;
  font-size: var(--dau-text-xs);
}


/* ─────────────────────────────────────────────────────────────
   6. BADGE / PILL — شارات صغيرة
   ───────────────────────────────────────────────────────────── */
.dau-badge {
  display:          inline-block;
  padding:          0.25rem 0.75rem;
  background-color: var(--dau-accent-light);
  color:            var(--dau-accent);
  font-size:        var(--dau-text-xs);
  font-weight:      var(--dau-weight-semibold);
  border-radius:    var(--dau-radius-pill);
  letter-spacing:   0.03em;
  text-transform:   uppercase;
}
.dau-badge-dark {
  background-color: rgba(255,255,255,.12);
  color:            var(--dau-text-light);
}


/* ─────────────────────────────────────────────────────────────
   7. CARDS — كروت
   ───────────────────────────────────────────────────────────── */
.dau-card {
  background-color: var(--dau-bg-card);
  border:           1px solid var(--dau-border);
  border-radius:    var(--dau-radius-md);
  box-shadow:       var(--dau-shadow-sm);
  padding:          var(--dau-space-lg);
  transition:       box-shadow var(--dau-transition),
                    transform var(--dau-transition);
}
.dau-card:hover {
  box-shadow: var(--dau-shadow-md);
  transform:  translateY(-2px);
}
.dau-card-flat {
  box-shadow: none;
}
.dau-card-dark {
  background-color: var(--dau-bg-section);
  border-color:     var(--dau-border-dark);
  color:            var(--dau-text-light);
}


/* ─────────────────────────────────────────────────────────────
   8. SECTION LAYOUTS — تخطيط السيكشنز
   ───────────────────────────────────────────────────────────── */
.dau-section {
  padding: var(--dau-space-2xl) var(--dau-space-lg);
}
.dau-section-dark {
  background-color: var(--dau-bg-section);
  color:            var(--dau-text-light);
}
.dau-section-label {
  display:      block;
  text-align:   center;
  margin-bottom:var(--dau-space-sm);
}
.dau-section-title {
  font-size:   var(--dau-text-3xl);
  font-weight: var(--dau-weight-bold);
  color:       var(--dau-text-heading);
  line-height: 1.25;
  margin:      0 0 var(--dau-space-sm);
}
.dau-section-title em,
.dau-section-title i {
  font-style: italic;
  color:      var(--dau-accent);
}
.dau-section-desc {
  font-size:  var(--dau-text-base);
  color:      var(--dau-text-body);
  max-width:  600px;
  margin:     0 auto var(--dau-space-lg);
  line-height:1.7;
}
.dau-section-dark .dau-section-title,
.dau-section-dark .dau-section-desc {
  color: var(--dau-text-light);
}


/* ─────────────────────────────────────────────────────────────
   9. DIVIDER — فاصل
   ───────────────────────────────────────────────────────────── */
.dau-divider {
  border: none;
  border-top: 1px solid var(--dau-border);
  margin: var(--dau-space-xl) 0;
}


/* ─────────────────────────────────────────────────────────────
   10. LINKS — روابط
   ───────────────────────────────────────────────────────────── */
.dau-link {
  color:           var(--dau-accent);
  text-decoration: none;
  transition:      color var(--dau-transition);
}
.dau-link:hover {
  color:           var(--dau-accent-hover);
  text-decoration: underline;
}
.dau-link-dark {
  color: var(--dau-text-light);
  opacity: 0.75;
}
.dau-link-dark:hover {
  opacity: 1;
  color: var(--dau-text-light);
}


/* ─────────────────────────────────────────────────────────────
   11. STATS — أرقام وإحصائيات
   ───────────────────────────────────────────────────────────── */
.dau-stat-value {
  font-size:   var(--dau-text-3xl);
  font-weight: var(--dau-weight-bold);
  color:       var(--dau-text-heading);
  line-height: 1;
}
.dau-stat-label {
  font-size:  var(--dau-text-sm);
  color:      var(--dau-text-muted);
  margin-top: 0.25rem;
}
.dau-stat-positive { color: var(--dau-positive); }
.dau-stat-negative { color: var(--dau-negative); }


/* ─────────────────────────────────────────────────────────────
   12. FORM INPUTS — مدخلات النماذج
   ───────────────────────────────────────────────────────────── */
.dau-input {
  width:            100%;
  padding:          0.65rem 1rem;
  background-color: var(--dau-bg-card);
  color:            var(--dau-text-heading);
  border:           1.5px solid var(--dau-border);
  border-radius:    var(--dau-radius-sm);
  font-size:        var(--dau-text-base);
  transition:       border-color var(--dau-transition),
                    box-shadow var(--dau-transition);
  outline:          none;
}
.dau-input:focus {
  border-color: var(--dau-accent);
  box-shadow:   0 0 0 3px rgba(61,107,74,.15);
}
.dau-input::placeholder {
  color: var(--dau-text-muted);
}


/* ─────────────────────────────────────────────────────────────
   13. RTL — عربي
   ───────────────────────────────────────────────────────────── */
body.rtl .dau-section-desc,
[dir="rtl"] .dau-section-desc {
  font-family: var(--dau-font-ar);
}

body.rtl .dau-btn,
[dir="rtl"] .dau-btn {
  font-family: var(--dau-font-ar);
  font-size:   var(--dau-text-base);
}

body.rtl .dau-card,
[dir="rtl"] .dau-card {
  text-align: right;
}

/* ─────────────────────────────────────────────────────────────
   14. LTR — إنجليزي
   ───────────────────────────────────────────────────────────── */
body.ltr .dau-btn,
[dir="ltr"] .dau-btn {
  font-family: var(--dau-font-en);
}

body.ltr .dau-card,
[dir="ltr"] .dau-card {
  text-align: left;
}


/* ─────────────────────────────────────────────────────────────
   15. RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dau-section {
    padding: var(--dau-space-xl) var(--dau-space-sm);
  }
  .dau-section-title {
    font-size: var(--dau-text-2xl);
  }
  .dau-btn-lg {
    width:      100%;
    text-align: center;
  }
}