/* =====================================================================
   ثيم: روبيكس الرسمي v1.0 — من حزمة التصميم RAWPIX DESIGN KIT
   خمسة ألوان فقط: #141416 · #1E1E22 · #2A2A31 · #CA0808 · #FFFFFF (الأبيض للنص فقط)
   v1.76: الخلفية فحمية بدل الأسود الخالص (أريح للعين، مثل الواجهات الداكنة العالمية) — الأحمر نفسه
   داكن دائماً · زوايا حادة · آر محمد للعناوين · تجوال للنص · سبيس جروتسك للأرقام
   هذا الملف يعرّف القيم فقط. التوزيع والهيكل مشترك في assets/css/style.css
   ===================================================================== */
:root {
  color-scheme: dark;

  /* الألوان الأساسية (لا ألوان خارجها) */
  --rp-black:      #141416;
  --rp-ink:        #1E1E22;
  --rp-maroon:     #2A2A31;
  --rp-red:        #CA0808;
  --rp-white:      #FFFFFF;
  --rp-red-hover:  #E00A0A;
  --rp-red-press:  #A50606;
  --rp-red-12:     rgba(202, 8, 8, .12);
  --rp-red-24:     rgba(202, 8, 8, .24);
  --rp-red-glow:   rgba(202, 8, 8, .45);

  /* الأسطح */
  --bg:            var(--rp-black);
  --surface:       var(--rp-ink);
  --surface-2:     var(--rp-maroon);
  --glass:         rgba(30, 30, 34, .62);
  --glass-line:    rgba(255, 255, 255, .08);

  /* لون الفعل */
  --accent:        var(--rp-red);
  --accent-hover:  var(--rp-red-hover);
  --accent-press:  var(--rp-red-press);
  --on-accent:     var(--rp-white);
  --accent-soft:   var(--rp-red-12);
  --accent-line:   var(--rp-red);
  --accent-text:   var(--rp-white);   /* ممنوع نص أحمر صغير على الأسود */
  --accent-glow:   var(--rp-red-glow);

  /* كتل الهوية */
  --brand:         var(--rp-ink);
  --brand-2:       var(--rp-maroon);
  --on-brand:      var(--rp-white);
  --on-brand-2:    rgba(255, 255, 255, .6);

  /* النصوص: شفافيات الأبيض */
  --text-1:        rgba(255, 255, 255, 1);
  --text-2:        rgba(255, 255, 255, .87);
  --text-3:        rgba(255, 255, 255, .74);  /* v1.77: أوضح لكل الأعمار (تباين أعلى) */
  --text-4:        rgba(255, 255, 255, .58);
  --heading:       var(--rp-white);

  /* الحدود والحقول */
  --line:          rgba(255, 255, 255, .08);
  --line-2:        var(--rp-maroon);
  --input-bg:      var(--rp-ink);
  --input-line:    var(--rp-maroon);
  --chip-bg:       var(--rp-maroon);
  --chip-text:     var(--rp-white);
  --table-head:    var(--rp-maroon);
  --row-hover:     rgba(42, 42, 49, .55);
  --card-line:     var(--rp-maroon);
  --btn-line:      rgba(255, 255, 255, .3);
  --save-bg:       var(--rp-red);   /* شارة التوفير والنقاط المربعة: حمراء دائماً حتى في صفحة العروض */
  --on-save:       var(--rp-white);
  --splash-bg:     var(--rp-black);
  --topbar-bg:     rgba(20, 20, 22, .82);
  --bottomnav-bg:  rgba(20, 20, 22, .94);
  --overlay:       rgba(0, 0, 0, .94);
  --scrim:         rgba(0, 0, 0, .72);

  /* الحالات: لا أخضر ولا أصفر — الحالة تُعرف بالأيقونة والنص */
  --ok:            var(--rp-white);  --on-ok: var(--rp-black); --ok-soft: var(--rp-ink);  --ok-text: var(--rp-white); --ok-line: var(--rp-white);
  --err:           var(--rp-red);    --on-err: var(--rp-white); --err-soft: var(--rp-ink); --err-text: var(--rp-white); --err-line: var(--rp-red);
  --warn-c:        var(--rp-white);  --warn-soft: var(--rp-ink); --warn-text: var(--rp-white); --warn-line: rgba(255, 255, 255, .38);
  --info-c:        var(--rp-white);  --info-soft: var(--rp-ink); --info-text: var(--rp-white); --info-line: var(--rp-maroon);
  --star:          var(--rp-white);
  --star-off:      rgba(255, 255, 255, .38);
  --focus:         var(--rp-red);

  /* الأشكال: حادة دائماً */
  --radius:        0;
  --radius-sm:     0;
  --radius-pill:   0;
  --radius-round:  0;
  --radius-media:  0;

  /* الخطوط */
  --font-display:  "AR Mohammed", "Tajawal", system-ui, sans-serif;
  --font-body:     "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num:      "Space Grotesk", "Tajawal", ui-monospace, sans-serif;
  --display-weight: 900;
  --display-track: 0;

  /* الظلال والتوهج */
  --shadow:        0 1px 0 rgba(255, 255, 255, .08) inset, 0 8px 24px rgba(0, 0, 0, .6);
  --shadow-lg:     0 1px 0 rgba(255, 255, 255, .08) inset, 0 16px 48px rgba(0, 0, 0, .75);
  --glow:          0 0 0 1px var(--rp-red), 0 0 24px var(--rp-red-glow);
  --glow-soft:     0 0 80px 10px var(--rp-red-12);
  --img-filter:    sepia(.16) saturate(1.06) hue-rotate(-10deg) contrast(1.04) brightness(.95);
  --grain:         .035;
  --edge-glow:     var(--rp-red-24);
}

/* صفحة العروض: هوية معكوسة — خلفية حمراء، بطاقات سوداء، زر أبيض بنص أسود */
.rp-offers {
  --bg:            var(--rp-red);
  --surface:       var(--rp-black);
  --surface-2:     var(--rp-ink);
  --glass:         rgba(0, 0, 0, .72);
  --accent:        var(--rp-white);
  --accent-hover:  var(--rp-white);
  --accent-press:  rgba(255, 255, 255, .86);
  --on-accent:     var(--rp-black);
  --accent-soft:   rgba(255, 255, 255, .12);
  --accent-line:   var(--rp-white);
  --line:          rgba(0, 0, 0, .25);
  --line-2:        rgba(0, 0, 0, .35);
  --card-line:     rgba(0, 0, 0, .35);
  --btn-line:      rgba(255, 255, 255, .4);
  --topbar-bg:     rgba(0, 0, 0, .78);
  --chip-bg:       var(--rp-ink);
  --glow:          0 0 0 1px var(--rp-white), 0 0 24px rgba(255, 255, 255, .35);
  --glow-soft:     0 0 60px 6px rgba(0, 0, 0, .35);
  --edge-glow:     rgba(0, 0, 0, .3);
}

/* =====================================================================
   الوضع النهاري — نفس الهوية بالمقلوب: خلفية فاتحة، الحبر الأسود للنص،
   والأحمر يبقى لون الفعل. الشعار بنسخته السوداء والمربع أحمر.
   ===================================================================== */
html[data-mode="light"] {
  color-scheme: light;

  --bg:            #F8F5F5;
  --surface:       #FFFFFF;
  --surface-2:     #F4EAEA;
  --glass:         rgba(255, 255, 255, .78);
  --glass-line:    rgba(18, 4, 4, .08);

  --accent:        var(--rp-red);
  --accent-hover:  var(--rp-red-hover);
  --accent-press:  var(--rp-red-press);
  --on-accent:     var(--rp-white);
  --accent-soft:   rgba(202, 8, 8, .07);
  --accent-line:   var(--rp-red);
  --accent-text:   var(--rp-red-press);   /* أحمر داكن مقروء على الفاتح */
  --accent-glow:   rgba(202, 8, 8, .28);

  --brand:         var(--rp-ink);          /* الكتل الداكنة تبقى داكنة (الفوتر، رأس اللوحة) */
  --brand-2:       var(--rp-maroon);
  --on-brand:      var(--rp-white);
  --on-brand-2:    rgba(255, 255, 255, .62);

  --text-1:        #120404;
  --text-2:        rgba(18, 4, 4, .86);
  --text-3:        rgba(18, 4, 4, .74);
  --text-4:        rgba(18, 4, 4, .6);
  --heading:       #120404;

  --line:          rgba(18, 4, 4, .08);
  --line-2:        #EADADA;
  --card-line:     #EBDDDD;
  --btn-line:      rgba(18, 4, 4, .26);
  --input-bg:      #FFFFFF;
  --input-line:    #E4D3D3;
  --chip-bg:       #F4EAEA;
  --chip-text:     #120404;
  --table-head:    #F6EEEE;
  --row-hover:     #FBF7F7;
  --topbar-bg:     rgba(255, 255, 255, .84);
  --bottomnav-bg:  rgba(255, 255, 255, .95);
  --scrim:         rgba(18, 4, 4, .68);

  --ok:            var(--rp-ink);   --on-ok: var(--rp-white); --ok-soft: #FFFFFF;  --ok-text: var(--rp-ink); --ok-line: var(--rp-ink);
  --err:           var(--rp-red);   --on-err: var(--rp-white); --err-soft: #FFFFFF; --err-text: var(--rp-ink); --err-line: var(--rp-red);
  --warn-c:        var(--rp-ink);   --warn-soft: #FFFFFF; --warn-text: var(--rp-ink); --warn-line: rgba(18, 4, 4, .35);
  --info-c:        var(--rp-ink);   --info-soft: #FFFFFF; --info-text: var(--rp-ink); --info-line: #EADADA;
  --star:          var(--rp-ink);
  --star-off:      rgba(18, 4, 4, .22);

  --shadow:        0 1px 0 rgba(18, 4, 4, .04), 0 8px 24px rgba(18, 4, 4, .06);
  --shadow-lg:     0 18px 48px rgba(18, 4, 4, .12);
  --glow:          0 0 0 1px var(--rp-red), 0 0 22px rgba(202, 8, 8, .3);
  --glow-soft:     0 14px 44px rgba(202, 8, 8, .12);
  --img-filter:    sepia(.1) saturate(1.04) hue-rotate(-8deg) contrast(1.02);
  --grain:         .02;
  --edge-glow:     rgba(202, 8, 8, .1);
}

/* صفحة العروض في الوضع النهاري: خلفية حمراء، بطاقات بيضاء، زر أسود بنص أبيض */
html[data-mode="light"] .rp-offers {
  --bg:            var(--rp-red);
  --surface:       #FFFFFF;
  --surface-2:     #F6EEEE;
  --glass:         rgba(255, 255, 255, .9);
  --accent:        var(--rp-ink);
  --accent-hover:  var(--rp-black);
  --accent-press:  var(--rp-black);
  --on-accent:     var(--rp-white);
  --accent-line:   var(--rp-ink);
  --accent-text:   var(--rp-ink);
  --line:          rgba(18, 4, 4, .1);
  --line-2:        rgba(18, 4, 4, .14);
  --card-line:     transparent;
  --btn-line:      rgba(18, 4, 4, .3);
  --topbar-bg:     rgba(255, 255, 255, .9);
  --chip-bg:       #F6EEEE;
  --glow:          0 0 0 1px var(--rp-ink), 0 0 22px rgba(0, 0, 0, .2);
  --glow-soft:     0 18px 40px rgba(0, 0, 0, .25);
  --edge-glow:     rgba(255, 255, 255, .18);
}
/* العناوين فوق الخلفية الحمراء تبقى بيضاء للتباين */
html[data-mode="light"] .rp-offers .offers-head { --text-1: #FFFFFF; --text-2: rgba(255, 255, 255, .9); --text-3: rgba(255, 255, 255, .72); }
html[data-mode="light"] .rp-offers .offers-head .kicker::before { background: #FFFFFF; }

/* الشعار في هذا الثيم: الحروف بيضاء، المربع أحمر دائماً (ولا يتغير حتى في صفحة العروض —
   الهيدر والفوتر يبقيان داكنين فيها فيظل المربع ظاهراً بدون أي تأثير إضافي) */
.brand-word .brand-sq { background: var(--rp-red); }

/* الإيموجي الملوّن يكسر قاعدة الخمسة ألوان: تحويله لأحادي داخل اللوحات */
.dash-nav a > span:first-child, .dash-nav .dash-link > span:first-child,
.bn-icon:not(:has(svg)) { filter: grayscale(1) brightness(1.4); }
html[data-mode="light"] .dash-nav a > span:first-child, html[data-mode="light"] .dash-nav .dash-link > span:first-child,
html[data-mode="light"] .bn-icon:not(:has(svg)) { filter: grayscale(1) brightness(.55); }