/* 📁 public/css/style.css */

/* Custom Styles and Font Setup */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

/* إعداد المتغيرات الافتراضية (الوضع الفاتح) */
:root {
  --bg-color: #EDE7F6;          /* deepPurple.shade50 */
  --surface-color: #D1C4E9;     /* deepPurple.shade100 */
  --text-color: #1e293b;        /* نص أساسي داكن وواضح */
  --border-color: #d8b4fe80;    /* حدود بنفسجية خفيفة */
  --scrollbar-thumb: #CE93D8;
  --scrollbar-thumb-hover: #BA68C8;
}

/* إعداد متغيرات الوضع الداكن تلقائياً عند تفعيل كلاس dark */
.dark {
  --bg-color: #121212;          /* Color(0xFF121212) */
  --surface-color: #1F1F1F;     /* Color(0xFF1F1F1F) */
  --text-color: #e2e8f0;        /* نص فاتح مريح للعين */
  --border-color: #262626;      /* حدود داكنة متناسقة */
  --scrollbar-thumb: #9575CD;
  --scrollbar-thumb-hover: #7E57C2;
}

/* تطبيق خط Cairo على العناصر النصية حصراً (بدون استهداف الأيقونات) */
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, p, span, a, li, div {
  font-family: 'Cairo', sans-serif;
}

/* 🚀 استثناء مهم جداً: إرجاع خط Font Awesome الأصلي للأيقونات لكي لا تتحول لمربعات */
.fa, .fas, .far, .fal, .fad, .fab,
.fa-solid, .fa-regular, .fa-brands {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

.fa-brands, .fab {
  font-family: "Font Awesome 6 Brands" !important;
}

.fa-solid, .fas {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  -webkit-tap-highlight-color: transparent;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom Scrollbar الديناميكي (يتكيف مع الفاتح والداكن) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* تأثيرات الانتقال السلسة للألوان والوضع الليلي */
body, div, span, header, footer, section, nav, a {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}