/* ═══════════════════════════════════════════════════════════════════════════
   PHI DESIGN SYSTEM — STRICT EDITION 1.0
   المصدر الوحيد لكل قياس ولون وحركة في: لوحة التحكم، المتاجر، الديليفري، منصة الزبائن.
   (shared/phi.css → يُنسخ بـ tools/sync-shared.js إلى admin/css و site و stores/delivery)

   القاعدة:   S(n) = 8 × φⁿ        φ = 1.6180339887 · الوحدة 8px
   كل قيمة تُقرَّب لأقرب بكسل صحيح (حدّة العرض على الشاشة):
     n : −4  −3  −2  −1   0   1   2   3   4   5    6    7    8    9    10
     px:  1   2   3   5   8  13  21  34  55  89  144  232  376  608  984
   أنصاف الدرجات  S(n+½) = S(n)·√φ :  10 · 16 · 27 · 43 · 70
   أرباع الدرجات للخط فقط T(k) = 8 × φ^(k/4) : 11 · 13 · 15 · 16 · 19 · 21 · 27 · 34 · 43
   الشفافيات φ⁻ⁿ : .618 .382 .236 .146 .090 .056 .034
   المدد S(n) ميلي ثانية: 89 · 144 · 232 · 376 · 608 · 984 · 1592 · 2576 · 4168 · 6744

   الاستثناءات الموثّقة (لا غيرها):
     E1  هدف اللمس 44px على الأجهزة اللمسية (WCAG 2.5.5 / Apple HIG) بدل 43 = S(3½).
     E2  الخط الشعري 1px = S(−4) مقرّباً (أقل من بكسل لا يُرسم بحدّة).
     E3  الدوائر (نقاط الحالة، الصور الرمزية): 50% — شكل لا قياس.
     E4  حدود المتصفح: max/min للمقاسات المرنة (min(), clamp()) تبقى نسبية.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ══ الثوابت ══ */
  --phi: 1.6180339887;
  --phi-unit: 8px;

  /* ══ المقياس S(n) ══ */
  --phi-n4: 1px;      /* S(−4) = 1.17  (E2) */
  --phi-n3: 2px;      /* S(−3) = 1.89 */
  --phi-n2: 3px;      /* S(−2) = 3.06 */
  --phi-n1: 5px;      /* S(−1) = 4.94 */
  --phi-0: 8px;       /* S(0) */
  --phi-1: 13px;      /* S(1) = 12.94 */
  --phi-2: 21px;      /* S(2) = 20.94 */
  --phi-3: 34px;      /* S(3) = 33.89 */
  --phi-4: 55px;      /* S(4) = 54.83 */
  --phi-5: 89px;      /* S(5) = 88.72 */
  --phi-6: 144px;     /* S(6) = 143.55 */
  --phi-7: 232px;     /* S(7) = 232.28 */
  --phi-8: 376px;     /* S(8) = 375.83 */
  --phi-9: 608px;     /* S(9) = 608.11 */
  --phi-10: 984px;    /* S(10) = 983.94 */
  --phi-11: 1592px;   /* S(11) = 1592.04 */
  /* أنصاف الدرجات S(n+½) */
  --phi-0h: 10px;     /* 10.18 */
  --phi-1h: 16px;     /* 16.47 */
  --phi-2h: 27px;     /* 26.64 */
  --phi-3h: 43px;     /* 43.11 */
  --phi-4h: 70px;     /* 69.75 */

  /* ══ المسافات (حشوة، هوامش، فجوات) ══ */
  --sp-3xs: var(--phi-n3);  /* 2 */
  --sp-2xs: var(--phi-n2);  /* 3 */
  --sp-xs: var(--phi-n1);   /* 5 */
  --sp-sm: var(--phi-0);    /* 8 */
  --sp-md: var(--phi-1);    /* 13 */
  --sp-lg: var(--phi-2);    /* 21 */
  --sp-xl: var(--phi-3);    /* 34 */
  --sp-2xl: var(--phi-4);   /* 55 */
  --sp-3xl: var(--phi-5);   /* 89 */

  /* ══ الخط: T(k) = 8 × φ^(k/4) ══ */
  --t-caption: 11px;   /* T(3)  = 11.48 — شارات، تذييلات */
  --t-label: 13px;     /* T(4)  = 12.94 — تسميات، جداول، نص ثانوي */
  --t-body: 15px;      /* T(5)  = 14.60 — نص الواجهة */
  --t-body-lg: 16px;   /* T(6)  = 16.47 — نص القراءة، حقول الجوال (يمنع تكبير iOS) */
  --t-h4: 19px;        /* T(7)  = 18.57 — عنوان بطاقة */
  --t-h3: 21px;        /* T(8)  = 20.94 — عنوان قسم */
  --t-h2: 27px;        /* T(10) = 26.64 — عنوان صفحة */
  --t-h1: 34px;        /* T(12) = 33.89 — عرض */
  --t-display: 43px;   /* T(14) = 43.11 — عرض كبير */
  --lh-body: 1.618;    /* φ */
  --lh-ui: 1.382;      /* 1 + φ⁻² — عناصر الواجهة المضغوطة */
  --lh-heading: 1.272; /* √φ */
  --font-ui: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-display: var(--font-ui);
  --font-body: var(--font-ui);
  --font-num: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ══ الأشكال: استدارة دقيقة لا ناعمة ══ */
  --r-xs: var(--phi-n3);  /* 2 — شارات، مؤشرات */
  --r-sm: var(--phi-n2);  /* 3 — حقول، أزرار صغيرة */
  --r-md: var(--phi-n1);  /* 5 — أزرار، قوائم */
  --r-lg: var(--phi-0);   /* 8 — بطاقات، نوافذ */
  --r-round: 50%;         /* E3 */
  --bw: var(--phi-n4);    /* E2 — حدّ شعري */
  --bw-strong: var(--phi-n3);

  /* ══ الأبعاد ══ */
  --h-xs: var(--phi-2);   /* 21 — شارة، مفتاح صغير */
  --h-sm: var(--phi-2h);  /* 27 — زر صغير */
  --h-md: var(--phi-3);   /* 34 — زر، حقل */
  --h-lg: var(--phi-3h);  /* 43 — زر بارز */
  --h-xl: var(--phi-4);   /* 55 — زر الإجراء الرئيسي على الهاتف */
  --touch-min: 44px;      /* E1 */
  --icon-sm: var(--phi-1);   /* 13 */
  --icon-md: var(--phi-1h);  /* 16 */
  --icon-lg: var(--phi-2);   /* 21 */
  --icon-box: var(--phi-3);  /* 34 — حاوية أيقونة */
  --icon-box-sm: var(--phi-2h); /* 27 */
  --avatar: var(--phi-3);

  /* ══ التخطيط ══ */
  --nav-w: var(--phi-7);       /* 232 — الشريط الجانبي */
  --nav-item-h: var(--phi-3);  /* 34 */
  --topbar-h: var(--phi-4);    /* 55 */
  --panel-w: var(--phi-8);     /* 376 — لوحة جانبية، درج */
  --modal-sm: var(--phi-8);    /* 376 */
  --modal-md: var(--phi-9);    /* 608 */
  --modal-lg: var(--phi-10);   /* 984 */
  --container: var(--phi-11);  /* 1592 */
  --container-read: var(--phi-9);
  --golden-major: 61.8%;       /* 1/φ */
  --golden-minor: 38.2%;       /* 1/φ² */
  --grid-golden: minmax(0, 1fr) minmax(0, 1.618fr);   /* جانبي : رئيسي */
  --grid-golden-rev: minmax(0, 1.618fr) minmax(0, 1fr);
  --grid-card-min: var(--phi-7);  /* أدنى عرض بطاقة في الشبكات */

  /* ══ اللون: الهوية ══ */
  --graphite: #111318;
  --ice: #F5F7FA;
  --cobalt: #365CFF;
  --mint: #31C6A5;
  /* الرمادي: خلط الجرافيت بالجليد بنسب φ⁻ⁿ */
  --n-950: #111318;  /* 0 */
  --n-900: #1E2025;  /* .056 */
  --n-850: #26282C;  /* .090 */
  --n-800: #323439;  /* .146 */
  --n-700: #47494D;  /* .236 */
  --n-600: #686A6E;  /* .382 */
  --n-500: #838589;  /* .500 */
  --n-400: #9EA0A4;  /* .618 */
  --n-300: #BFC1C5;  /* .764 */
  --n-200: #D4D6D9;  /* .854 */
  --n-100: #E0E2E6;  /* .910 */
  --n-50: #E8EAED;   /* .944 */
  --n-0: #F5F7FA;    /* 1 — الجليد */
  /* الكوبالت: خلط بالجرافيت/الأبيض بنسب φ⁻ⁿ */
  --cobalt-800: #2840A7;  /* +جرافيت .382 */
  --cobalt-700: #2D4BC8;  /* .236 */
  --cobalt-600: #3151DD;  /* .146 */
  --cobalt-300: #839AFF;  /* +أبيض .382 */
  --cobalt-200: #B2C1FF;  /* .618 */
  --cobalt-100: #E2E7FF;  /* .854 */
  --cobalt-50: #EDF0FF;   /* .910 */
  --mint-700: #216C5E;    /* +جرافيت .5 — حبر النجاح: 6.2 على الأبيض، ≥ 5.4 على خلفيته الشفافة */
  --mint-600: #25826F;    /* .382 — نص على الأبيض 4.67 */
  --mint-300: #80DCC7;
  --mint-100: #E1F7F2;
  --mint-50: #ECFAF7;
  --danger-300: #F07478;  /* أحمر فاتح: نص الخطر على الأسطح الداكنة */
  --warning-100: #FDEDD3; /* كهرماني فاتح: نص التحذير على الداكن */
  /* قنوات RGB للشفافيات: rgb(var(--x-rgb) / .146) */
  --graphite-rgb: 17 19 24;
  --ice-rgb: 245 247 250;
  --cobalt-rgb: 54 92 255;
  --mint-rgb: 49 198 165;
  --danger-rgb: 217 48 54;
  --warning-rgb: 245 165 36;
  --white-rgb: 255 255 255;

  /* ══ اللون: الأدوار (الوضع الفاتح) ══ */
  --c-bg: var(--ice);
  --c-surface: #FFFFFF;
  --c-surface-2: var(--n-0);
  --c-surface-3: var(--n-50);
  --c-chrome: var(--graphite);         /* الشريط الجانبي والأشرطة */
  --c-chrome-2: var(--n-900);
  --c-on-chrome: var(--ice);
  --c-on-chrome-2: var(--n-400);
  --c-border: var(--n-100);
  --c-border-strong: var(--n-300);
  --c-text: var(--graphite);
  --c-text-2: var(--n-600);
  --c-text-3: var(--n-500);
  --c-primary: var(--cobalt);
  --c-primary-hover: var(--cobalt-600);
  --c-primary-active: var(--cobalt-700);
  --c-primary-ink: var(--cobalt-700);
  --c-on-primary: #FFFFFF;
  --c-primary-soft: rgb(var(--cobalt-rgb) / .09);
  --c-primary-soft-2: rgb(var(--cobalt-rgb) / .146);
  --c-ring: rgb(var(--cobalt-rgb) / .382);
  --c-accent: var(--mint);
  --c-accent-ink: var(--mint-700);
  --c-on-accent: var(--graphite);
  --c-accent-soft: rgb(var(--mint-rgb) / .146);
  --c-success: var(--mint);
  --c-success-ink: var(--mint-700);
  --c-success-soft: rgb(var(--mint-rgb) / .146);
  --c-danger: #D93036;
  --c-danger-hover: #B9292E;
  --c-danger-ink: #C02A30;
  --c-danger-soft: rgb(var(--danger-rgb) / .09);
  --c-warning: #F5A524;
  --c-warning-ink: #9A5B00;
  --c-warning-soft: rgb(var(--warning-rgb) / .146);
  --c-info: var(--cobalt);
  --c-info-ink: var(--cobalt-700);
  --c-info-soft: var(--c-primary-soft);
  --c-scrim: rgb(var(--graphite-rgb) / .618);
  --c-hover: rgb(var(--graphite-rgb) / .056);
  --c-press: rgb(var(--graphite-rgb) / .09);

  /* ══ العمق: الإزاحة S(n−3)، التمويه S(n−1)، الشفافية φ⁻ⁿ ══ */
  --elev-a: var(--graphite-rgb);
  --elev-0: none;
  --elev-1: 0 1px 2px rgb(var(--elev-a) / .056);
  --elev-2: 0 2px 5px rgb(var(--elev-a) / .09), 0 1px 2px rgb(var(--elev-a) / .056);
  --elev-3: 0 5px 13px rgb(var(--elev-a) / .146), 0 2px 3px rgb(var(--elev-a) / .056);
  --elev-4: 0 13px 34px rgb(var(--elev-a) / .236), 0 3px 8px rgb(var(--elev-a) / .09);
  --focus-ring: 0 0 0 var(--phi-n3) var(--c-surface), 0 0 0 calc(var(--phi-n3) * 2) var(--c-ring);

  /* ══ الحركة: المدد S(n) ميلي ثانية، والمنحنيات من نسب φ ══ */
  --dur-1: 89ms;    /* S(5)  مرور، ضغط */
  --dur-2: 144ms;   /* S(6)  تركيز، قائمة، تلميح */
  --dur-3: 232ms;   /* S(7)  نافذة، درج، شريط جانبي، إشعار */
  --dur-4: 376ms;   /* S(8)  انتقال الأسطح */
  --dur-5: 608ms;   /* S(9)  طيران عنصر، تأكيد */
  --dur-loop: 1592ms; /* S(11) مؤشر تحميل */
  --dur-pulse: 2576ms; /* S(12) نبض تنبيه */
  --ease-standard: cubic-bezier(.382, 0, .236, 1);
  --ease-out: cubic-bezier(.146, .618, .236, 1);
  --ease-in: cubic-bezier(.618, 0, .854, .382);
  --press-scale: .966;   /* 1 − φ⁻⁷ */
  --enter-shift: var(--phi-n1); /* 5px */
  --t-hover: background-color var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard), opacity var(--dur-2) var(--ease-standard);
}

/* ══ الوضع الليلي: نفس البنية، أدوار مختلفة ══ */
[data-theme='dark'] {
  --c-bg: var(--n-950);
  --c-surface: var(--n-900);
  --c-surface-2: var(--n-850);
  --c-surface-3: var(--n-800);
  --c-chrome: #0B0C10;
  --c-chrome-2: var(--n-950);
  --c-border: var(--n-800);
  --c-border-strong: var(--n-700);
  --c-text: var(--n-0);
  --c-text-2: var(--n-400);
  --c-text-3: var(--n-500);
  --c-primary-ink: var(--cobalt-300);
  --c-primary-soft: rgb(var(--cobalt-rgb) / .146);
  --c-primary-soft-2: rgb(var(--cobalt-rgb) / .236);
  --c-ring: rgb(131 154 255 / .618);
  --c-accent-ink: var(--mint);
  --c-success-ink: var(--mint);
  --c-danger-ink: #F07478;
  --c-danger-soft: rgb(var(--danger-rgb) / .146);
  --c-warning-ink: var(--c-warning);
  --c-info-ink: var(--cobalt-300);
  --c-hover: rgb(var(--white-rgb) / .056);
  --c-press: rgb(var(--white-rgb) / .09);
  --elev-a: 0 0 0;
  --elev-1: 0 1px 2px rgb(0 0 0 / .236);
  --elev-2: 0 2px 5px rgb(0 0 0 / .382), 0 1px 2px rgb(0 0 0 / .236);
  --elev-3: 0 5px 13px rgb(0 0 0 / .382), 0 2px 3px rgb(0 0 0 / .236);
  --elev-4: 0 13px 34px rgb(0 0 0 / .618), 0 3px 8px rgb(0 0 0 / .382);
}

/* ══ اللمس: E1 ══ */
@media (pointer: coarse) {
  :root { --h-md: var(--touch-min); --nav-item-h: var(--touch-min); }
}

/* ══ حركات مشتركة ══ */
@keyframes phi-enter { from { opacity: 0; transform: translateY(var(--enter-shift)); } to { opacity: 1; transform: none; } }
@keyframes phi-scale-in { from { opacity: 0; transform: scale(var(--press-scale)); } to { opacity: 1; transform: none; } }
@keyframes phi-slide-start { from { transform: translateX(100%); } to { transform: none; } }
@keyframes phi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes phi-spin { to { transform: rotate(1turn); } }
@keyframes phi-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .382; } }
@keyframes phi-ring { from { box-shadow: 0 0 0 0 rgb(var(--cobalt-rgb) / .382); } to { box-shadow: 0 0 0 var(--phi-1) rgb(var(--cobalt-rgb) / 0); } }
@keyframes phi-bump { 0%, 100% { transform: scale(1); } 38.2% { transform: scale(1.146); } 61.8% { transform: scale(.966); } }
@keyframes phi-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ══ تقليل الحركة: كل المدد صفر ══ */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms; --press-scale: 1; --enter-shift: 0px; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}