/* ==========================================================================
   زاد السائرين — نظام التصميم الموحّد (Design Tokens)
   هذا الملف هو مصدر الحقيقة الوحيد لكل الألوان والضبابية والحواف والحركة.
   أي تغيير هنا ينعكس تلقائياً على كل صفحات المشروع.
   ========================================================================== */

:root {
  /* ---------- الضبابية (Blur) ---------- */
  --blur-btn: 8px;    /* ضبابية الأزرار (+5%) */
  --blur-card: 4px;    /* ضبابية البطاقات (+5%) */
  --blur-drawer: 3px;  /* ضبابية درج التنقل (+5%) */
  --blur-header: 9px; /* ضبابية السقف (+5%) */

  /* ---------- سماكة الأطر الناعمة (Soft Frames) ---------- */
  --frame-btn: 6px;
  --frame-card: 7px;
  --frame-text: 8px;

  /* ---------- الحواف الدائرية (Radius) ---------- */
  --radius-btn: 999px;     /* حواف دائرية كاملة للأزرار */
  --radius-btn-sm: 16px;   /* أزرار مستطيلة صغيرة (تبويبات، شرائح) */
  --radius-card: 24px;     /* حواف منحنية للبطاقات */
  --radius-card-sm: 18px;
  --radius-text: 8px;      /* حواف عناصر النصوص/الوسوم */
  --radius-drawer: 28px;

  /* ---------- التدرّج اللوني للنصوص حسب الأهمية ---------- */
  --text-h1: #d7e6f7;              /* عناوين السقف/الأقسام: فضي مائل للسمائي */
  --text-h1-glow: #8fc4ec;
  --text-h2: #ffffff;              /* عناوين ثانوية: أبيض غليظ */
  --text-h3: #d4dbe4;              /* فضي */
  --text-h4: #9aa7b5;              /* رمادي */
  --text-danger: #f3a4a4;
  --text-success: #8fe3ac;

  /* ---------- الزجاج الشفاف (Glassmorphism) ---------- */
  --glass-bg: rgba(255, 255, 255, 0.035);
  --glass-bg-strong: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-frame-tint: rgba(255, 255, 255, 0.028);
  --glow-sheen: rgba(255, 255, 255, 0.95);

  --card-bg: rgba(10, 12, 16, 0.32);
  --card-frame-tint: rgba(255, 255, 255, 0.022);

  /* ---------- الظلال ---------- */
  --shadow-text: 0 2px 10px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-drawer: -12px 0 45px rgba(0, 0, 0, 0.45);

  /* ---------- الأبعاد ---------- */
  --header-h: 60px;
  --app-max-w: 480px;

  /* ---------- الحركة ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.22s;
  --t-med: 0.42s;
  --t-slow: 0.6s;

  /* ---------- إعدادات قابلة للتخصيص من المستخدم ---------- */
  --font-scale: 1;
  --app-bg-image: none;
  --bg-overlay-opacity: 0.55;
  --bg-pos-x: 50%;
  --bg-pos-y: 50%;
  --bg-rotate: 0deg;
  --bg-scale: 1;
}

.reduce-motion, .reduce-motion * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* استجابة الشاشات الكبيرة: يبقى الهاتف مدمجاً بينما يستفيد الموقع من مساحة
   الحاسوب واللوحي دون تمدد النصوص إلى عرض غير مقروء. */
@media (min-width: 700px) {
  :root {
    --app-max-w: 1180px;
  }
}