/* ==========================================================================
   theme.css  —  نظام التصميم الموحّد للمنصة (خط + رموز تصميم + إتاحة)
   يُربط في كل صفحة قبل ملف التنسيق الخاص بها.
   ملاحظة: مسارات الخطوط نسبية لهذا الملف، فتعمل من أي عمق مجلد.
   ========================================================================== */

/* ---- الخط العربي المحلي (Tajawal) — يعمل بدون إنترنت ---- */
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/tajawal-400.ttf") format("truetype");
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/tajawal-500.ttf") format("truetype");
}
@font-face{
  font-family:'Tajawal'; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/tajawal-700.ttf") format("truetype");
}

/* ---- الرموز التصميمية (Design Tokens) ---- */
:root{
  --font-ar:'Tajawal','Segoe UI',Cairo,system-ui,-apple-system,sans-serif;

  /* ألوان المواد */
  --blue:#2563eb; --blue-strong:#1d4ed8;
  --physics:#3b82f6; --chem:#10b981; --science:#14b8a6; --math:#f59e0b; --history:#b45309;

  /* ألوان محايدة (فاتح) */
  --bg:#f4f6fb; --surface:#ffffff; --surface-2:#f8fafc;
  --text:#0f172a; --muted:#64748b; --border:#e7ebf3; --hover:#eef2f8;

  /* مقياس المسافات */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  /* الحواف */
  --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  /* الظلال */
  --sh-1:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.05);
  --sh-2:0 6px 18px rgba(15,23,42,.08);
  --sh-3:0 14px 34px rgba(15,23,42,.14);
  --ring:0 0 0 3px rgba(37,99,235,.35);
}
:root[data-theme="dark"]{
  --bg:#0b1220; --surface:#151e30; --surface-2:#0f1826;
  --text:#e8eef7; --muted:#93a3ba; --border:#2a3650; --hover:#1e293b;
  --sh-1:0 1px 2px rgba(0,0,0,.35);
  --sh-2:0 6px 20px rgba(0,0,0,.4);
  --sh-3:0 16px 38px rgba(0,0,0,.55);
  --ring:0 0 0 3px rgba(96,165,250,.45);
}

/* ---- أساسيات ---- */
body{ font-family:var(--font-ar); }

/* ---- إتاحة: تركيز واضح للوحة المفاتيح ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible, .chip:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px; border-radius:6px;
}

/* ---- إتاحة: احترام تفضيل تقليل الحركة ---- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}