/* ==========================================================================
   tokens.css — طبقة الرموز التصميمية (Design Tokens)
   كل لون ومسافة ونصف قطر وظل في التطبيق يأتي من هنا.

   النسخة القديمة كانت تحتوي 37 لوناً مكتوباً يدوياً في 100 موضع، و14
   متغيّراً فقط أحدها لم يُستخدم إطلاقاً، و105 استخدام لـ !important معظمها
   لمحاربة تكرار القواعد داخل الملف نفسه. هنا: مصدر واحد للحقيقة.
   ========================================================================== */

:root {
  /* ---------- سلّم الألوان الأساسي ---------- */
  /* العلامة: فيروزي المدرسة، معمّق ليحقق تباينًا كافيًا مع النص الأبيض */
  --teal-50:  #eafaf7;
  --teal-100: #ccf2ec;
  --teal-200: #99e5d9;
  --teal-300: #5fd3c3;
  --teal-400: #2fbfae;
  --teal-500: #12a594;
  --teal-600: #0d8577;
  --teal-700: #0b6a60;
  --teal-800: #0b544d;
  --teal-900: #093f3a;

  /* الذهبي الرسمي (هوية الوزارة) */
  --gold-100: #fdf3d3;
  --gold-200: #f8e2a0;
  --gold-300: #f0cc63;
  --gold-400: #e0b13a;
  --gold-500: #c8941a;
  --gold-600: #a3760f;
  --gold-700: #7d5a0c;

  /* رمادي مائل للأزرق — أساس الأسطح */
  --slate-25:  #fafbfd;
  --slate-50:  #f4f6fb;
  --slate-100: #e8ecf4;
  --slate-200: #d6dded;
  --slate-300: #b3bfd6;
  --slate-400: #8494b4;
  --slate-500: #5f7093;
  --slate-600: #45557a;
  --slate-700: #2f3d5e;
  --slate-800: #1d2942;
  --slate-850: #16203a;
  --slate-900: #111a2e;
  --slate-950: #0b1220;

  /* دلالية */
  --green-400: #34d399;  --green-500: #10b981;  --green-600: #059669;  --green-700: #047857;
  --amber-400: #fbbf24;  --amber-500: #f59e0b;  --amber-600: #d97706;  --amber-700: #b45309;
  --rose-400:  #fb7185;  --rose-500:  #f43f5e;  --rose-600:  #e11d48;  --rose-700:  #be123c;
  --blue-400:  #60a5fa;  --blue-500:  #3b82f6;  --blue-600:  #2563eb;  --blue-700:  #1d4ed8;
  --violet-500: #8b5cf6; --violet-600: #7c3aed;
  --whatsapp: #25d366;
  --whatsapp-dark: #128c7e;

  /* ---------- الخطوط ---------- */
  --font-body: 'Tajawal', 'Dubai', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-display: 'Cairo', 'Tajawal', 'Dubai', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

  /* سلّم أحجام سلس (يتكيّف مع عرض الشاشة) */
  --text-2xs: 0.7rem;
  --text-xs:  0.775rem;
  --text-sm:  0.875rem;
  --text-md:  0.975rem;
  --text-lg:  1.1rem;
  --text-xl:  clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem);
  --text-2xl: clamp(1.4rem, 1.15rem + 1.1vw, 1.85rem);
  --text-3xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --text-stat: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);

  --leading-tight: 1.25;
  --leading-normal: 1.65;
  --leading-loose: 1.9;

  /* ---------- المسافات (سلّم 4px) ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;

  /* ---------- الأنصاف والحدود ---------- */
  --r-xs: 6px;  --r-sm: 9px;  --r-md: 13px;  --r-lg: 18px;
  --r-xl: 24px; --r-full: 999px;
  --border-w: 1px;

  /* ---------- الحركة ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 130ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;

  /* ---------- الطبقات ---------- */
  --z-dock: 40;
  --z-sticky: 50;
  --z-modal: 100;
  --z-toast: 120;

  /* ---------- المقاسات ---------- */
  --tap-min: 44px;          /* أصغر مساحة لمس مقبولة */
  --content-max: 1440px;
  --dock-h: 70px;
}

/* ==========================================================================
   الوضع الداكن (الافتراضي)
   ========================================================================== */
:root,
[data-theme='dark'] {
  color-scheme: dark;

  --bg:            var(--slate-950);
  --bg-gradient:   radial-gradient(1200px 700px at 85% -10%, #17284a 0%, transparent 60%),
                   radial-gradient(900px 600px at 5% 0%, #0f2f36 0%, transparent 55%),
                   linear-gradient(180deg, #0b1220 0%, #0a1a24 100%);
  --surface:       #101a2e;
  --surface-2:     #16223c;
  --surface-3:     #1d2c4a;
  --surface-hover: #1f2f50;
  --surface-sunken:#0c1526;

  --border:        rgba(148, 173, 214, 0.16);
  --border-strong: rgba(148, 173, 214, 0.30);
  --border-focus:  var(--teal-300);

  --text:          #eef3fb;
  --text-2:        #b9c6dd;
  --text-3:        #9aabc7;
  --text-inverse:  #0b1220;

  --brand:         var(--teal-400);
  --brand-strong:  var(--teal-300);
  --brand-soft:    rgba(47, 191, 174, 0.14);
  --brand-border:  rgba(47, 191, 174, 0.38);
  --on-brand:      #04231f;

  --accent:        var(--gold-300);
  --accent-soft:   rgba(240, 204, 99, 0.13);

  --success:       var(--green-400);
  --success-soft:  rgba(52, 211, 153, 0.14);
  --warning:       var(--amber-400);
  --warning-soft:  rgba(251, 191, 36, 0.14);
  --danger:        var(--rose-400);
  --danger-soft:   rgba(251, 113, 133, 0.14);
  --info:          var(--blue-400);
  --info-soft:     rgba(96, 165, 250, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 18px 44px -14px rgba(0, 0, 0, 0.68);
  --shadow-xl: 0 32px 72px -20px rgba(0, 0, 0, 0.75);

  --glass:        rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.085);
  --scrim:        rgba(4, 9, 20, 0.72);
}

/* ==========================================================================
   الوضع الفاتح
   ========================================================================== */
[data-theme='light'] {
  color-scheme: light;

  --bg:            var(--slate-50);
  --bg-gradient:   radial-gradient(1100px 620px at 88% -8%, #dceeff 0%, transparent 58%),
                   radial-gradient(820px 520px at 4% 0%, #d9f5f0 0%, transparent 52%),
                   linear-gradient(180deg, #f6f8fc 0%, #eef2f9 100%);
  --surface:       #ffffff;
  --surface-2:     #f7f9fd;
  --surface-3:     #eef2f9;
  --surface-hover: #eaf0f9;
  --surface-sunken:#f0f3f9;

  --border:        rgba(45, 61, 94, 0.14);
  --border-strong: rgba(45, 61, 94, 0.26);
  --border-focus:  var(--teal-600);

  --text:          #16203a;
  --text-2:        #45557a;
  --text-3:        #5f7093;
  --text-inverse:  #ffffff;

  --brand:         var(--teal-600);
  --brand-strong:  var(--teal-700);
  --brand-soft:    rgba(13, 133, 119, 0.10);
  --brand-border:  rgba(13, 133, 119, 0.30);
  --on-brand:      #ffffff;

  --accent:        var(--gold-600);
  --accent-soft:   rgba(163, 118, 15, 0.11);

  --success:       var(--green-600);
  --success-soft:  rgba(5, 150, 105, 0.11);
  --warning:       var(--amber-700);
  --warning-soft:  rgba(180, 83, 9, 0.11);
  --danger:        var(--rose-600);
  --danger-soft:   rgba(225, 29, 72, 0.10);
  --info:          var(--blue-600);
  --info-soft:     rgba(37, 99, 235, 0.10);

  --shadow-sm: 0 1px 2px rgba(24, 39, 75, 0.06);
  --shadow-md: 0 6px 18px -8px rgba(24, 39, 75, 0.18);
  --shadow-lg: 0 18px 40px -16px rgba(24, 39, 75, 0.22);
  --shadow-xl: 0 30px 66px -24px rgba(24, 39, 75, 0.28);

  --glass:        rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.9);
  --scrim:        rgba(20, 30, 55, 0.42);
}

/* شاشات عالية التباين */
@media (prefers-contrast: more) {
  :root {
    --border: var(--border-strong);
    --text-2: var(--text);
    --text-3: var(--text-2);
  }
}