/*
 * =============================================================
 *  theme.css — ملف الثيم الموحّد لمدرسة الهندسة
 *  🎨 مُنسّق مع ألوان الصورة الشخصية (الجاكيت العنبري + خضرة)
 *  لتغيير شكل الموقع كله: عدّل القيم هنا فقط
 * =============================================================
 */
:root {
  /* ─── الخلفيات ─────────────────────────────────────────── */
  --bg:          #15110d;   /* خلفية الصفحة — كحلي غامق دافي */
  --bg-header:   #0a1118;   /* خلفية الهيدر */
  --bg-sidebar:  #111d2b;   /* خلفية السايد بار */
  --card:        #162336;   /* خلفية الكروت الأساسية */
  --card-hover:  #1b2c42;   /* خلفية الكارت عند hover */
  --card-border: #24384f;   /* بوردر الكروت */

  /* ─── النصوص ────────────────────────────────────────────── */
  --fg:          #f1ede8;   /* النص الرئيسي — أبيض دافي */
  --muted:       #a8b5c4;   /* النص الثانوي (خافت) */
  --fg-on-accent:#fff8ee;   /* النص فوق الأكسنت */

  /* ─── الحدود ────────────────────────────────────────────── */
  --line:        #1f3044;   /* لون البوردر والفواصل */

  /* ─── اللون الرئيسي (أزرار CTA، العناوين المهمة) ─────── */
  --accent:      #d4850a;   /* عنبري من الجاكيت */
  --accent-hover:#b8720a;   /* عنبري أغمق — hover */
  --accent-soft: rgba(212,133,10,.12); /* خلفية خفيفة عنبرية */

  /* ─── اللون الثانوي (باچات، حالات نشطة) ─────────────── */
  --accent-2:      #22915a; /* أخضر من خلفية الصورة */
  --accent-2-hover:#1a7a4b; /* أخضر أغمق — hover */
  --accent-2-soft: rgba(34,145,90,.12); /* خلفية خفيفة خضراء */

  /* ─── السايد بار ─────────────────────────────────────── */
  --sidebar-bg:          #111d2b;
  --sidebar-item:        transparent;
  --sidebar-item-hover:  rgba(212,133,10,.08);
  --sidebar-item-active-bg:   #d4850a;
  --sidebar-item-active-text: #fff8ee;
  --sidebar-text:        #a8b5c4;
  --sidebar-text-hover:  #f1ede8;
  --sidebar-divider:     #1a2d40;

  /* ─── ألوان الهيرو (الكارت الترحيبي) ──────────────────── */
  --hero-accent:   #d4850a;              /* عنبري الجاكيت */
  --hero-accent-2: #e9a235;             /* عنبري فاتح */
  --hero-green:    #22915a;             /* أخضر النباتات */
  --hero-glow:     rgba(212,133,10,.15); /* توهج خلفي */
  --hero-glow-2:   rgba(233,162,53,.08);

  /* ─── الكروت تفصيلي ─────────────────────────────────── */
  --card-shadow:     0 4px 16px rgba(0,0,0,.30);
  --card-icon-bg:    rgba(212,133,10,.10);  /* خلفية أيقونة الكارت */
  --card-icon-color: #e9a235;               /* لون الأيقونة */
  --card-tag-bg:     rgba(34,145,90,.12);   /* خلفية التاج */
  --card-tag-color:  #3ec47e;               /* لون نص التاج */
  --card-progress:   #d4850a;               /* بار التقدم */
  --card-progress-bg:#1a2d40;               /* خلفية بار التقدم */

  /* ─── أزرار ──────────────────────────────────────────── */
  --btn-primary-bg:    #d4850a;
  --btn-primary-hover: #b8720a;
  --btn-primary-text:  #fff8ee;
  --btn-secondary-bg:  transparent;
  --btn-secondary-border: #22915a;
  --btn-secondary-text:   #3ec47e;
  --btn-secondary-hover:  rgba(34,145,90,.12);
  --btn-danger-bg:     #b91c1c;
  --btn-danger-hover:  #991b1b;

  /* ─── الحواف والظلال ────────────────────────────────── */
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-full: 999px;
  --shadow-sm:   0 4px 12px rgba(0,0,0,.25);
  --shadow-md:   0 8px 22px rgba(0,0,0,.35);
  --shadow-lg:   0 14px 36px rgba(0,0,0,.5);

  /* ─── خطوط ──────────────────────────────────────────── */
  --font-ar: 'Cairo', 'Tajawal', sans-serif;
  --font-en: 'Inter', 'Segoe UI', sans-serif;

  /* ─── انتقالات ─────────────────────────────────────── */
  --transition: .2s ease;
}