/*
  theme.css — هوية «نجمة وطريق»: قيم الألوان والخطوط والقياسات للثيمين.

  النجمة = الهندسة الإسلامية (نجمة ثمانية، أقواس، ذهبي وفيروزي على كحلي الليل).
  الطريق = طابع ألعاب المدن: غروب وردي-برتقالي، عناوين بوستر عريضة بإطار أسود، وخط طريق بيوصلك من خطوة لخطوة.

  ثيمين:
    data-theme="night"  (الافتراضي)  كحلي الليل، ذهبي، فيروزي، وسما غروب للأبطال بس.
    data-theme="day"                 حجر عمّان الفاتح، فيروزي غامق وذهبي.
    data-theme="neon"                «ساحل النيون»: ليل ساحلي بنيون زهري وسماوي وحدود سودا (طابع بس، بصور حقيقية — رجع بطلب المالك 23/10).
  الأسماء القديمة بتمرق بالترحيل بـ boot.js: dark → night، light و calm → day.

  القاعدة: كل الشاشات بتقرأ --vp-* بس. وبنعيد ضبط --zk-* الأساسية لنفس القيم
  عشان مكوّنات zaki-ui (الأزرار، الحقول، الشريط الجانبي، المحطات) تتلوّن معنا.
  الألوان الصارخة (الغروب والذهبي) للأبطال والعناوين والأزرار الأساسية بس؛
  النص العادي هادئ بتباين AA (4.5 على الأقل) على كل السطوح.
*/

/* ═════════ القياسات والخطوط (مشتركة بين الثيمين) ═════════ */
:root {
  /* ── الخطوط ── */
  --vp-font-sans:    "IBM Plex Sans Arabic", var(--zk-font-sans);
  --vp-font-heading: "Reem Kufi", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --vp-font-display: "Lalezar", "Reem Kufi", "IBM Plex Sans Arabic", "Segoe UI Black", Tahoma, sans-serif;
  --vp-font-mono: Consolas, "Cascadia Mono", "Courier New", monospace;
  --vp-fs-2xs: var(--zk-text-12);
  --vp-fs-xs:  var(--zk-text-12);
  --vp-fs-sm:  var(--zk-text-13);
  --vp-fs-md:  var(--zk-text-14);
  --vp-fs-lg:  var(--zk-text-16);
  --vp-fs-xl:  var(--zk-text-20);
  --vp-fs-2xl: var(--zk-text-24);
  --vp-fs-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem);
  --vp-lh: var(--zk-leading-body);

  /* ── المسافات ── */
  --vp-space-1: var(--zk-space-4);
  --vp-space-2: var(--zk-space-8);
  --vp-space-3: var(--zk-space-12);
  --vp-space-4: var(--zk-space-16);
  --vp-space-5: var(--zk-space-24);
  --vp-space-6: var(--zk-space-32);
  --vp-gutter: var(--zk-space-16);
  --vp-page-max: 76rem;

  /* ── الأشكال ── */
  --vp-radius-sm:   0.5rem;
  --vp-radius-md:   0.75rem;
  --vp-radius-lg:   1.125rem;
  --vp-radius-pill: var(--zk-radius-full);
  --vp-arch-h: 4.5rem;

  /* ── التخطيط ── */
  --vp-topbar-h: 3.75rem;
  --vp-drawer-w: 26rem;
  --vp-tap: var(--zk-tap-min);
  --vp-z-topbar: var(--zk-z-sticky);
  --vp-z-drawer: var(--zk-z-nav);
  --vp-z-modal:  var(--zk-z-modal);
  --vp-z-toast:  var(--zk-z-toast);
  --vp-z-palette: var(--zk-z-palette);
  --vp-ease: var(--zk-duration-fast) var(--zk-ease-standard);
  --vp-ease-slow: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── ألوان الهوية الخام (نفسها بالثيمين؛ للزخرفة والأبطال) ── */
  --vp-gold:       #e3b04b;
  --vp-gold-light: #f6d27a;
  --vp-gold-deep:  #9a6f17;
  --vp-lapis:      #1f4fa8;
  --vp-turq:       #36b5cc;
  --vp-sunset-1:   #f28c38;
  --vp-sunset-2:   #e0457b;
  --vp-sunset-3:   #2b1a4a;
  --vp-night-ink:  #050f1f;
  --vp-cash:       #5bd77a;
  --vp-hl-yellow:  #f6d27a;
  --vp-hl-blue:    #7fc8ff;
  --vp-on-hero:    #ffffff;
  --vp-black:      #000000;
  /* إطار عناوين البوستر: أسود بـ 8 اتجاهات (أنعم من text-stroke مع الحروف العربية) */
  --vp-poster-outline: 2px 0 0 #000000, -2px 0 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000,
                       2px 2px 0 #000000, -2px 2px 0 #000000, 2px -2px 0 #000000, -2px -2px 0 #000000,
                       0 5px 0 #000000, 0 8px 18px rgb(0 0 0 / 0.55);

  /* ── ألوان المشاهد (فاتحة ومشبعة؛ النص فوقها غامق بالثيمين) ── */
  --vp-scene-1: #f6d27a;
  --vp-scene-2: #5fd0e0;
  --vp-scene-3: #ff9fb8;
  --vp-scene-4: #9cc2ff;
  --vp-scene-5: #ffb070;
  --vp-scene-6: #c9b0ff;
  --vp-scene-7: #e6dc95;
  --vp-scene-8: #8ee6b0;
  --vp-on-scene: #0b1b33;
}

/* ═════════ «ليل» — الافتراضي ═════════ */
:root,
[data-theme="night"],
[data-theme="dark"] {
  color-scheme: dark;

  /* السماء: خلفية الصفحة كاملة (كحلي بيفتح شوي لتحت متل أفق مدينة بالليل) */
  --vp-sky: linear-gradient(180deg, #040c19 0%, #061429 42%, #0a1d3a 78%, #10264a 100%);
  --vp-sunset: linear-gradient(180deg, #f28c38 0%, #e0457b 46%, #2b1a4a 100%);
  --vp-hero-shade: linear-gradient(180deg, rgb(5 15 31 / 0) 28%, rgb(5 15 31 / 0.8) 100%);
  --vp-orn: #e3b04b;
  --vp-orn-alpha: 0.07;

  /* ── السطوح ── */
  --vp-bg:            #050f1f;
  --vp-surface:       #0d2140;
  --vp-surface-2:     #081830;
  --vp-surface-3:     #14305a;
  --vp-glass:         rgb(8 22 44 / 0.86);
  --vp-overlay:       rgb(2 8 18 / 0.74);
  --vp-border:        #21406d;
  --vp-border-strong: #3a6296;
  --vp-border-input:  #5c7fb0;
  --vp-hairline:      rgb(227 176 75 / 0.26);

  /* ── النصوص ── */
  --vp-text:          #f4ecdc;
  --vp-heading:       #f6d27a;
  --vp-text-muted:    #bcc6d8;
  --vp-text-faint:    #9aabc6;

  /* ── الهوية ── */
  --vp-brand:         #e3b04b;
  --vp-brand-strong:  #f6d27a;
  --vp-brand-soft:    #2a2814;
  --vp-brand-text:    #f6d27a;
  --vp-on-brand:      #1c1300;
  --vp-cta:           #e3b04b;
  --vp-cta-hover:     #f0c463;
  --vp-cta-edge:      #9a6f17;
  --vp-on-cta:        #1c1300;
  --vp-accent:        #4fc3d8;
  --vp-accent-soft:   #0e3346;
  --vp-focus-ring:    #f6d27a;

  /* ── الحالات ── */
  --vp-ok:            #5bd77a;
  --vp-ok-soft:       #0f3324;
  --vp-warn:          #f2a64a;
  --vp-warn-soft:     #3a2716;
  --vp-danger:        #ff8a98;
  --vp-danger-soft:   #3d1626;
  --vp-on-danger:     #1a0610;
  --vp-info:          #8cc0ff;
  --vp-info-soft:     #142b52;
  --vp-idle:          #9fb0cb;
  --vp-idle-soft:     #172a47;

  /* ── الظلال ── */
  --vp-shadow-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 24px rgb(1 6 16 / 0.42);
  --vp-shadow-2: 0 4px 12px rgb(0 0 0 / 0.55), 0 24px 56px rgb(1 6 16 / 0.65);
  --vp-glow:     0 0 0 1px rgb(227 176 75 / 0.5), 0 0 22px rgb(227 176 75 / 0.25);
  --vp-text-shadow-hero: var(--vp-poster-outline);
  --vp-display-ink:    #ffffff;
  --vp-display-shadow: 2px 2px 0 #000000;
}

/* ═════════ «نهار» — حجر عمّان الفاتح ═════════ */
[data-theme="day"],
[data-theme="light"],
[data-theme="calm"] {
  color-scheme: light;

  --vp-sky: linear-gradient(180deg, #f7f2e8 0%, #f2ece1 55%, #ece2d2 100%);
  --vp-sunset: linear-gradient(180deg, #f2a15a 0%, #e06a8e 50%, #33456f 100%);
  --vp-hero-shade: linear-gradient(180deg, rgb(11 27 51 / 0) 28%, rgb(11 27 51 / 0.7) 100%);
  --vp-orn: #a8740f;
  --vp-orn-alpha: 0.08;

  --vp-bg:            #f2ece1;
  --vp-surface:       #fbf8f2;
  --vp-surface-2:     #ece4d6;
  --vp-surface-3:     #e2d7c4;
  --vp-glass:         rgb(251 248 242 / 0.9);
  --vp-overlay:       rgb(15 25 40 / 0.45);
  --vp-border:        #d9ccb6;
  --vp-border-strong: #b9a78a;
  --vp-border-input:  #8e7c60;
  --vp-hairline:      rgb(168 116 15 / 0.28);

  --vp-text:          #1b2333;
  --vp-heading:       #0b1b33;
  --vp-text-muted:    #464f61;
  --vp-text-faint:    #555e70;

  --vp-brand:         #0e6f84;
  --vp-brand-strong:  #0b5a6b;
  --vp-brand-soft:    #dcedf0;
  --vp-brand-text:    #0b5f71;
  --vp-on-brand:      #ffffff;
  --vp-cta:           #e3b04b;
  --vp-cta-hover:     #ecc060;
  --vp-cta-edge:      #9a6f17;
  --vp-on-cta:        #1c1300;
  --vp-accent:        #0a6577;
  --vp-accent-soft:   #d7ecef;
  --vp-focus-ring:    #0a6577;

  --vp-ok:            #126b3f;
  --vp-ok-soft:       #ddefe3;
  --vp-warn:          #8f4d08;
  --vp-warn-soft:     #f6e5cf;
  --vp-danger:        #b3223d;
  --vp-danger-soft:   #f7dee2;
  --vp-on-danger:     #ffffff;
  --vp-info:          #1f4fa8;
  --vp-info-soft:     #e1e8f6;
  --vp-idle:          #555e70;
  --vp-idle-soft:     #e9e2d5;

  --vp-shadow-1: 0 1px 2px rgb(60 40 10 / 0.08), 0 6px 18px rgb(60 40 10 / 0.08);
  --vp-shadow-2: 0 4px 12px rgb(11 27 51 / 0.12), 0 22px 50px rgb(11 27 51 / 0.18);
  --vp-glow:     0 0 0 1px rgb(14 111 132 / 0.42), 0 0 18px rgb(14 111 132 / 0.16);
  --vp-text-shadow-hero: var(--vp-poster-outline);
  --vp-display-ink:    #0b1b33;
  --vp-display-shadow: 2px 2px 0 #e3b04b;
}

/* ═════════ «ساحل النيون» — ليل ساحلي بنيون (طابع بس) ═════════
   الخلفية بنفسجي-كحلي عميق، الأساسي زهري نيون، الثانوي سماوي، الزر الأساسي أصفر.
   العناوين بخط Lalezar (وBangers للاتيني) مع ظل أسود حاد. الحدود السودا والظلال الحادة بـ ornament.css. */
[data-theme="neon"] {
  color-scheme: dark;

  --vp-font-heading: "Lalezar", "Reem Kufi", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --vp-font-display: "Bangers", "Lalezar", "Reem Kufi", "IBM Plex Sans Arabic", "Segoe UI Black", Tahoma, sans-serif;

  --vp-sky: linear-gradient(180deg, #0a0524 0%, #12073a 42%, #2a0f52 78%, #4b1356 100%);
  --vp-sunset: linear-gradient(180deg, #ffb347 0%, #ff4fa3 46%, #5b1a8f 100%);
  --vp-hero-shade: linear-gradient(180deg, rgb(10 5 36 / 0) 25%, rgb(10 5 36 / 0.8) 100%);
  --vp-orn: #00e5ff;
  --vp-orn-alpha: 0.05;

  --vp-bg:            #0a0524;
  --vp-surface:       #150a38;
  --vp-surface-2:     #0f0829;
  --vp-surface-3:     #261457;
  --vp-glass:         rgb(12 6 34 / 0.88);
  --vp-overlay:       rgb(5 2 20 / 0.78);
  --vp-border:        #3f2b8c;
  --vp-border-strong: #ff4fa3;
  --vp-border-input:  #8f78e0;
  --vp-hairline:      rgb(0 229 255 / 0.32);

  --vp-text:          #f6f1ff;
  --vp-heading:       #ffe566;
  --vp-text-muted:    #c9bfe8;
  --vp-text-faint:    #a99bd8;

  --vp-brand:         #ff4fa3;
  --vp-brand-strong:  #ff77b9;
  --vp-brand-soft:    #3a1146;
  --vp-brand-text:    #ff8cc6;
  --vp-on-brand:      #1a0420;
  --vp-cta:           #ffd23f;
  --vp-cta-hover:     #ffe066;
  --vp-cta-edge:      #000000;
  --vp-on-cta:        #1f1300;
  --vp-accent:        #00e5ff;
  --vp-accent-soft:   #0b3550;
  --vp-focus-ring:    #00e5ff;

  --vp-ok:            #3dffb0;
  --vp-ok-soft:       #0c3a3c;
  --vp-warn:          #ffb347;
  --vp-warn-soft:     #46233a;
  --vp-danger:        #ff6b8a;
  --vp-danger-soft:   #4a1038;
  --vp-on-danger:     #1a0712;
  --vp-info:          #7fb2ff;
  --vp-info-soft:     #1c2a66;
  --vp-idle:          #a99bd8;
  --vp-idle-soft:     #261457;

  --vp-shadow-1: 3px 3px 0 #000000;
  --vp-shadow-2: 6px 6px 0 #000000, 0 0 36px rgb(255 79 163 / 0.28);
  --vp-glow:     0 0 0 2px #ff4fa3, 0 0 22px rgb(255 79 163 / 0.45);
  --vp-text-shadow-hero: 3px 3px 0 #000000;
  --vp-display-ink:    #ff7ab8;
  --vp-display-shadow: 2px 2px 0 #000000;
}

/* ═════════ رموز مشتقة (بتتبع الثيم الحالي تلقائياً) ═════════ */
:root,
[data-theme] {
  --vp-focus: 0 0 0 2px var(--vp-bg), 0 0 0 4px var(--vp-focus-ring);
  --vp-sunset-line: linear-gradient(90deg, var(--vp-sunset-1), var(--vp-sunset-2) 55%, var(--vp-gold));
  --vp-cta-fill: linear-gradient(180deg, var(--vp-cta-hover), var(--vp-cta));

  /* ── zaki-ui: نفس القيم عشان مكوّنات الحزمة تتبع الهوية ── */
  --zk-color-surface-page:   var(--vp-bg);
  --zk-color-surface-card:   var(--vp-surface);
  --zk-color-surface-sunken: var(--vp-surface-2);
  --zk-color-surface-raised: var(--vp-surface-3);
  --zk-color-border:         var(--vp-border);
  --zk-color-border-strong:  var(--vp-border-strong);
  --zk-color-border-input:   var(--vp-border-input);
  --zk-color-text-heading:   var(--vp-heading);
  --zk-color-text:           var(--vp-text);
  --zk-color-text-muted:     var(--vp-text-muted);
  --zk-color-text-faint:     var(--vp-text-faint);
  --zk-color-brand:          var(--vp-brand);
  --zk-color-brand-on:       var(--vp-on-brand);
  --zk-color-brand-hover:    var(--vp-brand-strong);
  --zk-color-brand-soft:     var(--vp-brand-soft);
  --zk-color-focus:          var(--vp-focus-ring);
  --zk-color-warning:        var(--vp-warn);
  --zk-color-warning-soft:   var(--vp-warn-soft);
  --zk-color-error:          var(--vp-danger);
  --zk-color-error-soft:     var(--vp-danger-soft);
  --zk-color-error-border:   var(--vp-danger);
  --zk-color-success:        var(--vp-ok);
  --zk-color-success-soft:   var(--vp-ok-soft);
  --zk-color-chart-1:        var(--vp-scene-1);
  --zk-color-chart-2:        var(--vp-scene-4);
  --zk-color-chart-3:        var(--vp-scene-6);
  --zk-color-chart-4:        var(--vp-scene-2);
  --zk-color-chart-5:        var(--vp-scene-5);
  --zk-color-chart-6:        var(--vp-scene-3);
  --zk-color-surface-sidebar: var(--vp-glass);
  --zk-color-text-sidebar:   var(--vp-text-muted);
  --zk-color-scrollbar:      var(--vp-border);
  --zk-color-scrollbar-hover: var(--vp-border-strong);
  --zk-shadow-raised:        var(--vp-shadow-1);
  --zk-shadow-overlay:       var(--vp-shadow-2);
  --zk-radius-card:          var(--vp-radius-md);
  --zk-radius-control:       var(--vp-radius-sm);
  --zk-radius-sheet:         var(--vp-radius-lg);
}

@media (max-width: 560px) {
  :root { --vp-gutter: var(--zk-space-12); }
}