/* MB MEDIA — Built for MOHAMAD BASSEM MEFTAH — mftahbassem@gmail.com */
/* ============================================================
   tokens.css — نظام القيم البصرية بثلاث طبقات
   ------------------------------------------------------------
   الطبقة ١ : القيم الخام      → الحقيقة الوحيدة. لا تُستخدم بالصفحات.
   الطبقة ٢ : القيم الدلالية   → هذا ما تستخدمه الصفحات فعلياً.
   الطبقة ٣ : قيم المكوّنات    → لضبط مكوّن واحد بكل المنصة من سطر.

   ⚠️ قاعدة حاكمة: ممنوع كتابة أي لون أو مسافة أو حجم مباشرة
      خارج الطبقة ١ بأي ملف بالمشروع.
   ============================================================ */

/* ============================================================
   الطبقة ١ — القيم الخام (RAW)
   ============================================================ */
:root {

  /* ---------- ألوان الماركة الرسمية — لا تُغيّر أبداً ---------- */
  --mb-navy:  #0E1B2E;   /* = --mb-navy-800 */
  --mb-cyan:  #17B4D6;   /* = --mb-cyan-500 */
  --mb-white: #FFFFFF;
  --mb-coral: #E8734A;   /* = --mb-coral-500 — للـ CTA حصراً */

  /* ---------- سلّم الكحلي (فاتح → غامق) ---------- */
  --mb-navy-50:  #F1F4F9;
  --mb-navy-100: #DFE6F1;
  --mb-navy-200: #C0CEE3;
  --mb-navy-300: #97ADCE;
  --mb-navy-400: #6C8AB7;
  --mb-navy-500: #476A9E;
  --mb-navy-600: #2F4B75;
  --mb-navy-700: #1C304F;
  --mb-navy-750: #152540;  /* درجة وسيطة — أسطح مرتفعة بالوضع الداكن */
  --mb-navy-800: #0E1B2E;  /* ★ كحلي الماركة */
  --mb-navy-850: #0B1523;
  --mb-navy-900: #08101C;

  /* ---------- سلّم السماوي (فاتح → غامق) ---------- */
  --mb-cyan-50:  #EDFAFD;
  --mb-cyan-100: #D1F2FA;
  --mb-cyan-200: #A3E6F5;
  --mb-cyan-300: #6CD7EF;
  --mb-cyan-400: #3AC9E9;
  --mb-cyan-500: #17B4D6;  /* ★ سماوي الماركة */
  --mb-cyan-600: #1094B2;
  --mb-cyan-700: #0B768E;
  --mb-cyan-800: #075769;
  --mb-cyan-900: #043C49;

  /* ---------- سلّم المرجاني (CTA فقط) ---------- */
  --mb-coral-300: #F5AF93;
  --mb-coral-400: #F08A64;
  --mb-coral-500: #E8734A;  /* ★ مرجاني الماركة */
  --mb-coral-600: #BE4C26;
  --mb-coral-700: #A8431F;

  /* ---------- سلّم الرمادي (بلمسة كحلية) ---------- */
  --mb-gray-50:  #F9FAFB;
  --mb-gray-100: #F0F2F4;
  --mb-gray-200: #DFE2E7;
  --mb-gray-300: #C6CBD2;
  --mb-gray-400: #A0A7B1;
  --mb-gray-500: #7A8290;
  --mb-gray-600: #5C6470;
  --mb-gray-700: #424852;
  --mb-gray-800: #2B2F36;
  --mb-gray-900: #181B20;

  /* ---------- حالات وظيفية — نسخة للوضع الداكن ونسخة للفاتح ----------
     (مشتقة من نفس اللوحة، ومفحوصة تبايناً ≥ 4.5:1 على خلفيتها) */
  --mb-success-dark: #30B584;  --mb-success-light: #0C7A53;
  --mb-warning-dark: #F0A119;  --mb-warning-light: #9A6200;
  --mb-danger-dark:  #FF6B6B;  --mb-danger-light:  #C42B2B;
  --mb-info-dark:    #4CC2F0;  --mb-info-light:    #0B76A8;

  /* ---------- سلّم المسافات ---------- */
  --mb-s-0: 0;
  --mb-s-1: 4px;
  --mb-s-2: 8px;
  --mb-s-3: 12px;
  --mb-s-4: 16px;
  --mb-s-5: 24px;
  --mb-s-6: 32px;
  --mb-s-7: 48px;
  --mb-s-8: 64px;
  --mb-s-9: 96px;

  /* ---------- عائلات الخطوط ---------- */
  --mb-font-ar:   'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --mb-font-en:   'Sora', 'Segoe UI', Arial, sans-serif;
  --mb-font-body: 'Inter', 'IBM Plex Sans Arabic', 'Segoe UI', Arial, sans-serif;
  --mb-font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  /* يضبطه mb-i18n.js حسب اللغة الحالية — لا تكتبه يدوياً */
  --mb-font-heading: var(--mb-font-ar);

  /* ---------- سلّم أحجام الخط (نسبي · فلويد بالأحجام الكبيرة) ---------- */
  --mb-t-xs:   0.75rem;    /* 12px */
  --mb-t-sm:   0.875rem;   /* 14px */
  --mb-t-base: 1rem;       /* 16px */
  --mb-t-lg:   1.125rem;   /* 18px */
  --mb-t-xl:   1.25rem;    /* 20px */
  --mb-t-2xl:  clamp(1.375rem, 1.25rem + 0.6vw, 1.5rem);
  --mb-t-3xl:  clamp(1.625rem, 1.4rem + 1.1vw, 1.875rem);
  --mb-t-4xl:  clamp(1.875rem, 1.5rem + 1.9vw, 2.5rem);
  --mb-t-5xl:  clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);

  /* ---------- أوزان الخط ---------- */
  --mb-w-regular:  400;
  --mb-w-medium:   500;
  --mb-w-semibold: 600;
  --mb-w-bold:     700;

  /* ---------- ارتفاع السطر ---------- */
  --mb-lh-tight:   1.2;
  --mb-lh-snug:    1.4;
  --mb-lh-normal:  1.6;
  --mb-lh-relaxed: 1.8;

  /* ---------- تباعد الحروف ---------- */
  --mb-ls-tight:  -0.02em;
  --mb-ls-normal: 0;
  --mb-ls-wide:   0.04em;

  /* ---------- الحواف الدائرية ---------- */
  --mb-r-none: 0;
  --mb-r-sm:   4px;
  --mb-r-md:   8px;
  --mb-r-lg:   12px;
  --mb-r-xl:   18px;
  --mb-r-2xl:  26px;
  --mb-r-full: 9999px;

  /* ---------- الظلال ---------- */
  --mb-shadow-none: none;
  --mb-shadow-sm:   0 1px 2px rgb(8 16 28 / 0.20);
  --mb-shadow-md:   0 4px 10px rgb(8 16 28 / 0.24);
  --mb-shadow-lg:   0 10px 26px rgb(8 16 28 / 0.30);
  --mb-shadow-xl:   0 22px 50px rgb(8 16 28 / 0.38);

  /* ---------- الحركة ---------- */
  --mb-dur-fast: 120ms;
  --mb-dur-base: 200ms;
  --mb-dur-slow: 360ms;
  --mb-dur-liquid: 500ms;                       /* حركة الكبسولة وأيقونة الوضع */
  --mb-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --mb-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --mb-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --mb-ease-liquid: cubic-bezier(0.34, 1.2, 0.64, 1);   /* من مرجع القائمة الزجاجية */
  --mb-ease-press:  cubic-bezier(0.32, 0.72, 0, 1);     /* ضغطة الزر */

  /* ---------- طبقات z ---------- */
  --mb-z-base:     0;
  --mb-z-dropdown: 100;
  --mb-z-sticky:   200;
  --mb-z-bar:      300;
  --mb-z-overlay:  400;
  --mb-z-modal:    500;
  --mb-z-toast:    600;

  /* ---------- نقاط التوقف (للتوثيق والرجوع — CSS لا يقرأها بـ media) ---------- */
  --mb-bp-sm: 480px;
  --mb-bp-md: 768px;
  --mb-bp-lg: 1024px;
  --mb-bp-xl: 1440px;

  /* ---------- عرض المحتوى ---------- */
  --mb-width-text:  68ch;
  --mb-width-page:  1200px;
  --mb-width-wide:  1440px;

  /* ---------- أصغر مساحة لمس مقبولة ---------- */
  --mb-tap: 44px;
}

/* ============================================================
   الطبقة ٢ — القيم الدلالية (SEMANTIC)
   ⚠️ الصفحات تستخدم هذه الطبقة فقط.
   الافتراضي = الوضع الداكن.
   ============================================================ */
:root,
[data-theme="dark"] {
  --mb-bg:          var(--mb-navy-800);
  --mb-bg-elevated: var(--mb-navy-750);
  --mb-bg-sunken:   var(--mb-navy-900);

  --mb-fg:          var(--mb-white);
  --mb-fg-muted:    var(--mb-navy-100);
  --mb-fg-subtle:   var(--mb-navy-300);

  --mb-border:        #24344C;
  --mb-border-strong: #3A4E6E;

  --mb-accent:       var(--mb-cyan-400);
  --mb-accent-hover: var(--mb-cyan-300);
  --mb-accent-fg:    var(--mb-navy-900);

  --mb-cta:       var(--mb-coral-500);
  --mb-cta-hover: var(--mb-coral-400);
  --mb-cta-fg:    var(--mb-navy-900);

  --mb-success: var(--mb-success-dark);
  --mb-warning: var(--mb-warning-dark);
  --mb-danger:  var(--mb-danger-dark);
  --mb-info:    var(--mb-info-dark);

  --mb-focus-ring:        var(--mb-cyan-300);
  --mb-focus-ring-offset: var(--mb-bg);

  --mb-overlay: rgb(8 16 28 / 0.72);
  --mb-shadow:  var(--mb-shadow-md);

  /* القائمة الرئيسية — الطبقة الزجاجية (وضع داكن) */
  --mb-nav-bg:     rgb(14 27 46 / var(--mb-nav-bg-alpha, 0.55));
  --mb-nav-solid:  var(--mb-navy-800);
  --mb-nav-fg:     var(--mb-white);
  --mb-nav-muted:  var(--mb-navy-200);
  --mb-nav-border: #24344C;
  --mb-nav-pill:   color-mix(in srgb, var(--mb-cyan-400) 18%, transparent);
  --mb-nav-ring:        rgb(255 255 255 / 0.15);
  --mb-nav-highlight:   rgb(255 255 255 / 0.20);
  --mb-nav-caustic:     rgb(0 0 0 / 0.10);
  --mb-nav-reflection:  rgb(255 255 255 / 0.12);
  --mb-nav-glass-shadow: rgb(0 0 0 / 0.55);
  --mb-nav-glare:       color-mix(in srgb, var(--mb-cyan-400) 40%, transparent);
  --mb-nav-pill-shadow: 0 4px 12px rgb(0 0 0 / 0.40), inset 0 1px 1px rgb(255 255 255 / 0.15);
}

[data-theme="light"] {
  --mb-bg:          var(--mb-white);
  --mb-bg-elevated: var(--mb-gray-50);
  --mb-bg-sunken:   var(--mb-gray-100);

  --mb-fg:          var(--mb-navy-800);
  --mb-fg-muted:    var(--mb-navy-600);
  --mb-fg-subtle:   var(--mb-gray-600);

  --mb-border:        var(--mb-gray-200);
  --mb-border-strong: var(--mb-gray-400);

  --mb-accent:       var(--mb-cyan-700);
  --mb-accent-hover: var(--mb-cyan-800);
  --mb-accent-fg:    var(--mb-white);

  --mb-cta:       var(--mb-coral-600);
  --mb-cta-hover: var(--mb-coral-700);
  --mb-cta-fg:    var(--mb-white);

  --mb-success: var(--mb-success-light);
  --mb-warning: var(--mb-warning-light);
  --mb-danger:  var(--mb-danger-light);
  --mb-info:    var(--mb-info-light);

  --mb-focus-ring:        var(--mb-cyan-700);
  --mb-focus-ring-offset: var(--mb-bg);

  --mb-overlay: rgb(14 27 46 / 0.55);
  --mb-shadow:  0 4px 14px rgb(14 27 46 / 0.10);

  --mb-nav-bg:     rgb(255 255 255 / var(--mb-nav-bg-alpha, 0.55));
  --mb-nav-solid:  var(--mb-white);
  --mb-nav-fg:     var(--mb-navy-800);
  --mb-nav-muted:  var(--mb-navy-600);
  --mb-nav-border: var(--mb-gray-200);
  --mb-nav-pill:   rgb(255 255 255 / 0.85);
  --mb-nav-ring:        rgb(14 27 46 / 0.15);
  --mb-nav-highlight:   rgb(255 255 255 / 0.80);
  --mb-nav-caustic:     rgb(255 255 255 / 0.40);
  --mb-nav-reflection:  rgb(255 255 255 / 0.60);
  --mb-nav-glass-shadow: rgb(14 27 46 / 0.15);
  --mb-nav-glare:       color-mix(in srgb, var(--mb-cyan-500) 35%, transparent);
  --mb-nav-pill-shadow: 0 4px 12px rgb(14 27 46 / 0.12), inset 0 1px 1px rgb(255 255 255 / 0.80);
}

/* ============================================================
   الطبقة ٣ — قيم المكوّنات (COMPONENT)
   غيّر قيمة هنا → يتغيّر المكوّن بكل المنصة.
   ============================================================ */
:root {

  /* ---------- الشريط العلوي/السفلي ----------
     القيم تتحكم فيها مقياس [data-theme] بالأسفل (يعكس البار مع الوضع). */
  --mb-bar-h:     56px;
  --mb-bar-bg:    var(--mb-navy-800);
  --mb-bar-fg:    var(--mb-white);
  --mb-bar-muted: var(--mb-navy-200);
  --mb-bar-accent:var(--mb-cyan-400);
  --mb-bar-hover: var(--mb-navy-700);
  --mb-bar-focus: var(--mb-cyan-300);
  --mb-bar-font:  var(--mb-font-body);
  --mb-bar-size:  var(--mb-t-sm);
  --mb-bar-pad:   var(--mb-s-3);
  --mb-bar-gap:   var(--mb-s-3);
  --mb-bar-border:#24344C;
  --mb-bar-z:     var(--mb-z-bar);

  /* ---------- الأزرار ---------- */
  --mb-btn-h:        var(--mb-tap);
  --mb-btn-pad:      var(--mb-s-5);
  --mb-btn-radius:   var(--mb-r-md);
  --mb-btn-font:     var(--mb-font-body);
  --mb-btn-size:     var(--mb-t-base);
  --mb-btn-weight:   var(--mb-w-semibold);
  --mb-btn-border-w: 1px;

  /* ---------- البطاقات ---------- */
  --mb-card-pad:    var(--mb-s-5);
  --mb-card-radius: var(--mb-r-lg);
  --mb-card-bg:     var(--mb-bg-elevated);
  --mb-card-border: var(--mb-border);
  --mb-card-shadow: var(--mb-shadow);

  /* ---------- النافذة ---------- */
  --mb-modal-w:      520px;
  --mb-modal-radius: var(--mb-r-xl);
  --mb-modal-pad:    var(--mb-s-6);
  --mb-modal-bg:     var(--mb-bg-elevated);
  --mb-modal-fg:     var(--mb-fg);
  --mb-modal-z:      var(--mb-z-modal);

  /* ---------- الحقول ---------- */
  --mb-input-h:        var(--mb-tap);
  --mb-input-pad:      var(--mb-s-3);
  --mb-input-radius:   var(--mb-r-md);
  --mb-input-border:   var(--mb-border-strong);
  --mb-input-bg:       var(--mb-bg-sunken);
  --mb-input-fg:       var(--mb-fg);
  --mb-input-placeholder: var(--mb-fg-subtle);

  /* ---------- الشارات ---------- */
  --mb-badge-radius: var(--mb-r-full);
  --mb-badge-pad:    var(--mb-s-1) var(--mb-s-3);
  --mb-badge-size:   var(--mb-t-xs);
  --mb-badge-font:   var(--mb-font-mono);

  /* ---------- الشبكة ---------- */
  --mb-grid-gap:     var(--mb-s-5);
  --mb-grid-min:     260px;

  /* ---------- حلقة التركيز ---------- */
  --mb-ring-w:      3px;
  --mb-ring-offset: 2px;

  /* ---------- الأيقونات (خطية دائماً) ---------- */
  --mb-icon-size:   20px;
  --mb-icon-stroke: 1.75;

  /* ---------- النماذج ---------- */
  --mb-check-size:    22px;
  --mb-check-radius:  var(--mb-r-sm);
  --mb-switch-w:      48px;
  --mb-switch-h:      28px;
  --mb-file-pad:      var(--mb-s-6);
  --mb-form-gap:      var(--mb-s-5);
  --mb-form-col:      280px;   /* أصغر عرض لعمود بشبكة النموذج */

  /* ---------- القائمة الرئيسية والفوتر ---------- */
  --mb-nav-h:         64px;
  /* الطبقة الزجاجية — القيم من مرجع mbmedia-liquid-nav.
     ⚠️ blur ثقيل على أندرويد المتوسط، لذلك يُخفَّض بالموبايل ولا يُلغى.
     لتخفيف الأداء أكثر: أنقص --mb-nav-blur وحده. */
  --mb-nav-blur:      50px;                    /* الديسكتوب — قيمة المرجع */
  --mb-nav-blur-sm:   12px;                    /* الموبايل — مخفّفة للأداء */
  --mb-nav-saturate:  200%;
  --mb-nav-bg-alpha:  0.55;                    /* شفافية الطبقة الزجاجية */
  /* ألوان القائمة تُعرَّف بالطبقة ٢ لأنها تنقلب مع الوضع:
     --mb-nav-bg · --mb-nav-fg · --mb-nav-muted · --mb-nav-border */
  --mb-nav-radius:    var(--mb-r-full);
  --mb-nav-gap:       var(--mb-s-2);
  --mb-nav-z:         var(--mb-z-sticky);
  --mb-nav-panel-z:   var(--mb-z-overlay);
  --mb-footer-pad:    var(--mb-s-6);

  /* ---------- مكوّنات صفحات المنتجات ---------- */
  --mb-section-pad:     var(--mb-s-8);
  --mb-hero-pad:        var(--mb-s-9);
  --mb-hero-overlay:    rgb(14 27 46 / 0.72);
  --mb-pricing-radius:  var(--mb-r-xl);
  --mb-step-dot:        44px;
  --mb-accordion-dur:   var(--mb-dur-base);
  --mb-prose-measure:   var(--mb-width-text);

  /* ---------- الرسائل والمؤشرات ---------- */
  --mb-toast-w:      380px;
  --mb-toast-gap:    var(--mb-s-3);
  --mb-toast-inset:  var(--mb-s-5);
  --mb-spinner-size: 24px;
  --mb-progress-h:   6px;
}

/* ---------- الشريط — الوضع الفاتح ----------
   يعكس البار مع الوضع في كل الصفحات والديموهات دفعة واحدة.
   قاعدة الطبقة ٣ تأتي بعد :root فتغلبها عند data-theme="light". */
[data-theme="light"] {
  --mb-bar-bg:    var(--mb-white);
  --mb-bar-fg:    var(--mb-navy-800);
  --mb-bar-muted: var(--mb-navy-600);
  --mb-bar-accent:var(--mb-cyan-700);
  --mb-bar-hover: var(--mb-gray-100);
  --mb-bar-focus: var(--mb-cyan-700);
  --mb-bar-border:var(--mb-gray-200);
}