/* =============================================================================
   منصة Hi Mico — رموز التصميم (Design Tokens)
   =============================================================================
   حُرِّر يدويًّا 2026-10 — إعادة التصميم (`docs/design-handoff/HANDOFF.md` · المرحلة 1).
   كان «مولّدًا آليًّا» من لوحة Polaris، ولا مولِّدَ له في `scripts/` — فيُحرَّر هنا مباشرةً.

   الأصل: لوحة التصميم المعتمدة (DS-Foundations · DS-Controls · DS-Surfaces) —
   رماديّاتٌ محايدة (#101010 … #F7F7F7) وأزرق Mico للتركيز والذكاء وحدَهما.

   قواعد الاستخدام الملزمة:
     1. الواجهة محايدة ~90%. اللون إشارة وظيفية لا زينة: الأحمرُ خسارةٌ/مرتجعة،
        والأخضرُ ربحٌ/مسلَّمة، والبرتقاليُّ متأخّرةٌ/عالقة، وأزرقُ Mico تركيزٌ وذكاء — **ليس للنصّ**.
     2. --action-primary يظهر مرة واحدة في الشاشة كحد أقصى.
     3. لا تستخدم لون حالة لأي شيء غير الحالة نفسها.
     4. ممنوع كتابة hex خارج هذا الملف.
   ========================================================================== */

:root {
  --surface-page: #F4F4F4;
  --surface: #FFFFFF;
  /* بلاطةُ شعار شركةٍ أو قناة: بيضاءُ في الثيمين — شعاراتٌ داكنةٌ شفّافة تختفي على سطحٍ داكن (حملةُ التحميص أ · T2-03) */
  --logo-plate: #FFFFFF;
  /* حجابُ ما وراء النافذة — أثقلُ في الظلمة كي تبقى الصورةُ هي المضيئة */
  --scrim: rgb(0 0 0 / 0.72);
  --surface-secondary: #F7F7F7;
  --surface-tertiary: #F1F1F1;
  --surface-hover: #F7F7F7;
  --surface-active: #F1F1F1;
  --surface-selected: #EBEBEB;
  --text: #101010;
  --text-secondary: #4A4A4A;
  --text-disabled: #B5B5B5;
  --text-on-fill: #FFFFFF;
  --border: #E3E3E3;
  --border-secondary: #EBEBEB;
  --border-hover: #616161;
  --border-focus: #2670FF;
  --icon: #4A4A4A;
  --icon-secondary: #616161;
  --action-primary: #101010;
  --action-primary-hover: #1F1F1F;
  --action-primary-active: #000000;
  --link: #1A5FD6;
  --link-hover: #174FB3;
  --link-active: #123F91;
  --fill-success: #0E6B2E;
  /* زرّ الإلغاء والحذف وحده */
  --fill-critical: #C8231B;
  --fill-warning: #FFB800;
  /**
   * **حبرُ العنبر** (تمحيص 2026-09-12 · الجولة 4): `--text-on-fill` أبيضُ في
   * الثيم الفاتح، وأبيضُ على `#FFB800` = **1.73:1** — شارةٌ لا تُقرأ. والعنبرُ
   * فاتحٌ في الثيمين معًا، فحبرُه داكنٌ في الثيمين معًا (9:1 و11:1).
   * **رمزٌ مضافٌ لا مُبدَّل**: لا يتبدّل به شيءٌ قائمٌ في أيّ قسم.
   */
  --text-on-warning: #241A00;
  --fill-info: #91D0FF;
  /* أزرق Mico: تركيزٌ وذكاء — لا نصَّ عليه */
  --fill-emphasis: #2670FF;

  /* ---------- المخطّطات (`components/shared/charts`) ----------
     من «أين طلبيّات الشهر الآن» و«هذا الشهر» في لوحة القيادة الجديدة.
     ولا تُستعار ألوانُ الحالات (حكرٌ على StatusBadge — القاعدة 3): للمخطّط لوحتُه.
     -1 السلسلةُ الحاضرة · في الطريق (أزرق Mico) · -2 المقارنة (رماديّ: الماضي خلفيّةٌ للحاضر)
     -3 ما سُلّم · -4 ما ينتظر القرار · -5 ما أُلغي · -6 ما رجع. */
  --chart-1: #2670FF;
  --chart-1-end: #5A96FF;
  --chart-2: #A3A3A3;
  --chart-3: #0E6B2E;
  --chart-3-end: #0E6B2E;
  --chart-4: #D9A600;
  --chart-5: #A3A3A3;
  --chart-6: #C8231B;

  /* ---------- حالات الطلب (COD) — **بمعانيها المستعارة** (قرارُ DHN 2026-10-24) ----------
     يستعيرها نحو مئتي ملفٍّ خارج شارة الحالة لونًا للمعنى: «ملغاة» للخطر والخسارة (102 ملفّ) ·
     «مرشّحة للإرجاع» و«مرتجعة» للتحذير (76 و26) · «جديدة» للمحايد · «مؤكَّدة» وسمًا مميَّزًا.
     فتبقى معانيها بألوان التصميم الجديد: ملغاة = أحمرُ الخطر · مرشّحة ومرتجعة = برتقاليُّ التحذير ·
     جديدة = رماديّ · مؤكَّدة = بنفسجيُّها القديم (لا مقابلَ له في اللوحة الجديدة، والأزرقُ للمشحونة) ·
     مشحونة = أزرق · موصَّلة = أخضر (في COD لحظةُ التسليم لحظةُ قبض المال). وبحدٍّ ظاهرٍ كما كانت.
     **وألوانُ الشارة نفسِها** (جديدة صفراء · ملغاة رماديّة …) في `--badge-*` أسفلَه — تقرؤها المرحلة 2. */
  --status-new-bg: #F1F1F1;
  --status-new-border: #E3E3E3;
  --status-new-text: #303030;
  --status-confirmed-bg: #F5F0FD;
  --status-confirmed-border: #DDC6F9;
  --status-confirmed-text: #402A56;
  --status-shipped-bg: #E0ECFF;
  --status-shipped-border: #C9DCFF;
  --status-shipped-text: #0B3A8C;
  --status-delivered-bg: #D7F4CE;
  --status-delivered-border: #C6EBBF;
  --status-delivered-text: #0D4A1A;
  --status-returned-bg: #FFE6CC;
  --status-returned-border: #FFDDB0;
  --status-returned-text: #5A2C00;
  --status-cancelled-bg: #FFF0EE;
  --status-cancelled-border: #FFCFC9;
  --status-cancelled-text: #6E1008;
  --status-at-risk-bg: #FFF4E5;
  --status-at-risk-border: #FFDDB0;
  --status-at-risk-text: #5A2C00;

  /* ---------- خطر الإرجاع (RTO) ----------
     أربع درجات بنفس المعاني: منخفض أخضر · متوسّط أصفر · مرتفع برتقاليّ · حرج أحمر.
     ولها توكنزُها لا توكنزُ الحالة: الحالةُ بُعدٌ والخطرُ بُعدٌ آخر
     يُقرآن في سطرٍ واحد، فاشتراكُ الاسم يخلط المعنيين. */
  --risk-low-bg: #D7F4CE;
  --risk-low-border: #D7F4CE;
  --risk-low-text: #0D4A1A;
  --risk-medium-bg: #FFF0B3;
  --risk-medium-border: #FFF0B3;
  --risk-medium-text: #4D3800;
  --risk-high-bg: #FFE6CC;
  --risk-high-border: #FFE6CC;
  --risk-high-text: #5A2C00;
  --risk-critical-bg: #FFDEDA;
  --risk-critical-border: #FFDEDA;
  --risk-critical-text: #6E1008;

  /* ---------- الكثافة ----------
     مضغوطة افتراضيًا (صفّ 38). التبديل عبر [data-density] على <html>. */
  --row-h: 2.375rem;
  --cell-px: 0.75rem;
  --card-p: 1rem;
  --font-size-base: 0.875rem;
  --gap: 0.5rem;

  /* ---------- الاستدارة والظلال ----------
     الظلُّ حلقةُ 1px تحدّد الحافّة + ظلٌّ ناعم. لا ظلالَ داخل الجداول. */
  --radius: 0.625rem;
  --shadow-card: 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 16px rgb(0 0 0 / 0.03);

  /**
   * حجزٌ أسفلَ صفحة الطلبيّة بقَدر شريط الأزرار الملتصق.
   *
   * والقيمةُ هنا **افتراضٌ قبل التحميل** وحدَه: يقيس الشريطُ نفسَه فور
   * ظهوره ويكتب قَدرَه الحقيقيّ (order-actions.tsx)، ويكتب صفرًا فوق
   * lg حيث لا شريطَ ملتصقًا. ورقمٌ ثابتٌ هنا يكذب مع كلّ لغةٍ تطول.
   */
  --order-bar: 6rem;
  /**
   * وارتفاعُ شريط «منتج جديد» السفليّ على الهاتف — يكتبه product-form.tsx فور ظهوره ويمحوه حين يغيب.
   * وصفرٌ هنا هو احتياطُ `var(--himico-bar-h, 0px)` نفسُه فلا يتغيّر محسوبٌ — يُعرَّف كي لا يُعدّ رمزًا ميّتًا
   * (globals.css `--page-bar-h` من تصحيح المرحلة 3 · ونافذةُ الإشعار في layout.tsx).
   */
  --himico-bar-h: 0px;
  /**
   * وارتفاعُ إشعار التصدير الطافي — يكتبه export-dock.tsx على `<html>` فور ظهوره ويمحوه حين يغيب، فيعلوه شريطُ «اسأل Mico» ونافذةُ الإشعار.
   * وصفرٌ هنا هو احتياطُ `var(--himico-dock-h, 0px)` نفسُه فلا يتغيّر محسوبٌ — يُعرَّف كي لا يُعدّ رمزًا ميّتًا (أمرُ DHN 2026-10-26).
   */
  --himico-dock-h: 0px;
  /**
   * وارتفاعُ شريط «بيئة تجربة» — يكتبه staging-banner.tsx (`html:root` يغلب هذا) على خادم التجربة وحدَه، فتطرحه الشاشاتُ التي تأخذ
   * الشاشةَ كاملةً (`(preview)`). وصفرٌ هنا هو احتياطُ `var(--staging-banner-h, 0px)` نفسُه — يُعرَّف كي لا يُعدّ رمزًا ميّتًا (م12).
   */
  --staging-banner-h: 0px;
  --shadow-popover: 0 0 0 1px rgb(0 0 0 / 0.08), 0 8px 24px -6px rgb(0 0 0 / 0.18);
}

[data-density="comfortable"] {
  --row-h: 2.875rem;
  --cell-px: 0.75rem;
  --card-p: 1rem;
  --font-size-base: 0.875rem;
  --gap: 0.75rem;
}

/* السطحُ الداكن #161618 — كلُّ نسبة تباينٍ في هذه الكتلة مقيسةٌ عليه */
.dark {
  --scrim: rgb(0 0 0 / 0.82);
  /* أعمقُ من السطح كي تبقى البطاقةُ أعلى */
  --surface-page: #0F0F11;
  --surface: #161618;
  --surface-secondary: #1D1D20;
  --surface-tertiary: #242428;
  --surface-hover: #1D1D20;
  --surface-active: #242428;
  --surface-selected: #2A2A2F;
  --text: #F2F2F3;
  --text-secondary: #B4B4BA;
  --text-disabled: #55555C;
  /* الزرّ الأساسيّ يصير فاتحًا بنصٍّ داكن */
  --text-on-fill: #161618;
  --border: #313136;
  --border-secondary: #2A2A2F;
  --border-hover: #9E9EA5;
  --border-focus: #4C8DFF;
  --icon: #B4B4BA;
  --icon-secondary: #9E9EA5;
  --action-primary: #F2F2F3;
  --action-primary-hover: #FFFFFF;
  --action-primary-active: #DCDCDF;
  --link: #7AA7FF;
  --link-hover: #A3C2FF;
  --link-active: #7AA7FF;
  --fill-success: #5CD27A;
  --fill-critical: #FF5A4E;
  --fill-warning: #FFC94D;
  --text-on-warning: #241A00;
  --fill-info: #5FA8DE;
  --fill-emphasis: #4C8DFF;

  /* المخطّطات في الظلمة — أفتحُ درجةً كي تبقى فوق 3:1 على السطح الداكن */
  --chart-1: #4C8DFF;
  --chart-1-end: #6EA0FF;
  --chart-2: #707077;
  --chart-3: #5CD27A;
  --chart-3-end: #5CD27A;
  --chart-4: #F5D96B;
  --chart-5: #707077;
  --chart-6: #FF5A4E;

  --status-new-bg: #242428;
  --status-new-border: #313136;
  --status-new-text: #DCDCDF;
  --status-confirmed-bg: #332841;
  --status-confirmed-border: #513D68;
  --status-confirmed-text: #EAD2FF;
  --status-shipped-bg: #15284D;
  --status-shipped-border: #2D4B85;
  --status-shipped-text: #B3CCFF;
  --status-delivered-bg: #12321C;
  --status-delivered-border: #1F4D2C;
  --status-delivered-text: #A3E6AE;
  --status-returned-bg: #3D2510;
  --status-returned-border: #5C3A1A;
  --status-returned-text: #FFC28F;
  --status-cancelled-bg: #3D1714;
  --status-cancelled-border: #5C2622;
  --status-cancelled-text: #FFB4AB;
  --status-at-risk-bg: #3D2510;
  --status-at-risk-border: #5C3A1A;
  --status-at-risk-text: #FFC28F;

  /* ---------- خطر الإرجاع في الظلمة ---------- */
  --risk-low-bg: #12321C;
  --risk-low-border: #12321C;
  --risk-low-text: #A3E6AE;
  --risk-medium-bg: #3A3110;
  --risk-medium-border: #3A3110;
  --risk-medium-text: #F5D96B;
  --risk-high-bg: #3D2510;
  --risk-high-border: #3D2510;
  --risk-high-text: #FFC28F;
  --risk-critical-bg: #3D1714;
  --risk-critical-border: #3D1714;
  --risk-critical-text: #FFB4AB;

  /* الظلُّ في الظلمة حلقةٌ فاتحة */
  --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.11), 0 1px 2px rgb(255 255 255 / 0.07), 0 4px 16px rgb(255 255 255 / 0.04);
  --shadow-popover: 0 0 0 1px rgb(255 255 255 / 0.11), 0 8px 24px -6px rgb(0 0 0 / 0.6);
  /* الحقولُ وخاناتُ الاختيار الأصليّة */
  color-scheme: dark;
}

/* =============================================================================
   رموزٌ مضافة — إعادة التصميم (HANDOFF.md §2 · القسم ب)
   أسماءٌ جديدة لا تبدّل شيئًا قائمًا؛ تقرؤها مكوّناتُ المراحل 2–8.
   ========================================================================== */
:root {
  /* رماديّاتٌ لم تكن لها أسماء */
  --surface-subdued: #F7F7F7;
  --surface-pressed: #F1F1F1;
  /* 13.0:1 · نصّ الأزرار الثانويّة */
  --text-strong-2: #303030;
  /* 6.2:1 · تلميحاتٌ ونصٌّ مساعد */
  --text-muted: #616161;
  /* 4.7:1 */
  --text-placeholder: #737373;
  /* 3.4:1 · حدُّ الحقول (عنصرٌ لا نصّ: يكفيه 3:1) */
  --border-input: #8A8A8A;

  /* العلامة — أزرق Mico 4.3:1: تركيزٌ وذكاءٌ ومنحنيات، **ليس للنصّ** */
  --mico-blue: #2670FF;
  /* عينا الشعار وحدهما */
  --mico-eyes: #8FD3FF;
  --critical-hover: #B01E17;
  --critical-active: #8E1812;

  /* أرقامٌ لها معنى — للأرقام وحدها، لا للخلفيّات */
  --text-profit: #0E6B2E;
  --text-loss: #B42318;
  --text-late: #8A4B00;

  /* شرائطُ التنبيه داخل الصفحة */
  --alert-info-bg: #EAF2FF;
  --alert-info-ring: #C9DCFF;
  --alert-info-text: #0B3A8C;
  --alert-info-icon: #1A5FD6;
  --alert-success-bg: #EAF8E6;
  --alert-success-ring: #C6EBBF;
  --alert-success-text: #0D4A1A;
  --alert-success-icon: #0E6B2E;
  --alert-warning-bg: #FFF4E5;
  --alert-warning-ring: #FFDDB0;
  --alert-warning-text: #5A2C00;
  --alert-warning-icon: #8A4B00;
  --alert-critical-bg: #FFF0EE;
  --alert-critical-ring: #FFCFC9;
  --alert-critical-text: #6E1008;
  --alert-critical-icon: #B42318;
  --toast-bg: #1F1F1F;
  --toast-text: #FFFFFF;

  /* شارةُ الحالة وحدها (`StatusBadge` · المرحلة 2) — ألوانُ الإطار، بلا حدٍّ ظاهر، والدائرةُ تقول المرحلة.
     جديدة = أصفر (تنتظر قرارًا) · مؤكَّدة = بنفسجيّ (قرارُ DHN 2026-10-25 · لونُها قبل المرحلة 4) · عند الناقل = أزرق · مسلَّمة = أخضر · مرتجعة = أحمر (خسارة) ·
     ملغاة = رماديّ (قرارُ DHN 2026-10-24) · مرشّحةٌ للإرجاع = برتقاليّ (متأخّرة/عالقة).
     و«تنتظر التغليف» و«لم تُشحن» لونان لا حالتان — حيث تعرضهما المنصّة. **لا تُستعار خارج الشارة.** */
  --badge-new-bg: #FFF0B3;
  --badge-new-text: #4D3800;
  --badge-confirmed-bg: #F5F0FD;
  --badge-confirmed-fg: #402A56;
  --badge-shipped-bg: #E0ECFF;
  --badge-shipped-text: #0B3A8C;
  --badge-delivered-bg: #D7F4CE;
  --badge-delivered-text: #0D4A1A;
  --badge-returned-bg: #FFDEDA;
  --badge-returned-text: #6E1008;
  --badge-cancelled-bg: #F1F1F1;
  --badge-cancelled-text: #4A4A4A;
  --badge-at-risk-bg: #FFE6CC;
  --badge-at-risk-text: #5A2C00;
  --badge-packing-bg: #FFF0B3;
  --badge-packing-text: #4D3800;
  --badge-unshipped-bg: #F1F1F1;
  --badge-unshipped-text: #4A4A4A;

  /* الخطّ — الأحجام (حجم/سطر · وزن) */
  --type-money-xl-size: 1.625rem;
  --type-money-xl-lh: 2rem;
  --type-money-xl-weight: 600;
  --type-heading-lg-size: 1.25rem;
  --type-heading-lg-lh: 1.75rem;
  --type-heading-lg-weight: 600;
  --type-heading-md-size: 1rem;
  --type-heading-md-lh: 1.5rem;
  --type-heading-md-weight: 600;
  --type-heading-sm-size: 0.875rem;
  --type-heading-sm-lh: 1.25rem;
  --type-heading-sm-weight: 600;
  --type-body-size: 0.875rem;
  --type-body-lh: 1.25rem;
  --type-body-weight: 400;
  --type-body-sm-size: 0.8125rem;
  --type-body-sm-lh: 1.25rem;
  --type-body-sm-weight: 400;
  --type-caption-size: 0.75rem;
  --type-caption-lh: 1rem;
  --type-caption-weight: 500;
  --type-mobile-body-size: 0.9375rem;
  --type-mobile-body-lh: 1.375rem;
  --type-mobile-body-weight: 400;

  /* المسافات — سُلّمٌ على أساس 4 (يطابق سُلّم Tailwind: p-1 = 4px …) */
  --space-050: 0.125rem;
  --space-100: 0.25rem;
  --space-150: 0.375rem;
  --space-200: 0.5rem;
  --space-300: 0.75rem;
  /* 16 · حشو البطاقة · هامش الهاتف */
  --space-400: 1rem;
  /* 20 · هامش اللوحة على الحاسوب */
  --space-500: 1.25rem;
  /* 24 · بين أقسام الصفحة */
  --space-600: 1.5rem;
  /* 32 · الحالات الفارغة */
  --space-800: 2rem;
  /* 44 · أصغر هدف لمس على الهاتف */
  --touch-min: 2.75rem;
  /* 48 · الحقلُ على الهاتف (خطُّه 16 فلا يكبّر iPhone الصفحة) — المرحلة 2 */
  --field-h-phone: 3rem;

  /* الاستدارة (أسماءٌ دلاليّة؛ تُربط بـrounded-* في globals.css) */
  --r-tag: 0.375rem;
  --r-badge: 0.5rem;
  --r-field: 0.625rem;
  --r-inner: 0.75rem;
  --r-phone-row: 0.875rem;
  --r-card: 1rem;
  --r-phone-card: 1.125rem;
  --r-dialog: 1.25rem;
  --r-pill: 9999px;

  /* ظلالٌ مضافة */
  --shadow-button: 0 0 0 1px rgb(0 0 0 / 0.13), 0 1px 0 rgb(0 0 0 / 0.05);
  --shadow-button-pressed: 0 0 0 1px rgb(0 0 0 / 0.16), inset 0 1px 2px rgb(0 0 0 / 0.1);
  --shadow-card-hover: 0 0 0 1px rgb(0 0 0 / 0.12), 0 2px 4px rgb(0 0 0 / 0.06), 0 8px 20px rgb(0 0 0 / 0.05);
  --shadow-modal: 0 0 0 1px rgb(0 0 0 / 0.08), 0 24px 48px -12px rgb(0 0 0 / 0.35);
  /* ظلّان لـ`filter` (لا `box-shadow`): شعارُ تطبيقٍ على شاشة الهاتف · وولايةٌ ترتفع في الخريطة (حملةُ التحميص أ · ت3) */
  --shadow-logo: drop-shadow(0 1px 2px rgb(0 0 0 / 0.18));
  --shadow-lift: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35));
  --shadow-panel-light: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.06);
  --shadow-phone-card: 0 0 0 1px rgb(0 0 0 / 0.07), 0 1px 2px rgb(0 0 0 / 0.05);
  /* حلقة 2px بفراغ 2px */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--mico-blue);

  /* اللمعة — للزرّ الأساسيّ وحده (وشريط «اسأل Mico» والإطار الداكن) — تُطفأ بـ.fx-off */
  --gloss-primary: radial-gradient(50% 50% at 50% 0%, rgb(255 255 255 / 0.22) 0%, rgb(255 255 255 / 0) 100%), radial-gradient(50% 40% at 50% 100%, rgb(90 150 255 / 0.32) 0%, rgb(90 150 255 / 0) 70%);
  --gloss-primary-hover: radial-gradient(50% 50% at 50% 0%, rgb(255 255 255 / 0.3) 0%, rgb(255 255 255 / 0) 100%), radial-gradient(50% 40% at 50% 100%, rgb(90 150 255 / 0.45) 0%, rgb(90 150 255 / 0) 70%);
  --shadow-primary: 0 1px 1px -0.5px rgb(0 0 0 / 0.15), 0 4px 6px -2px rgb(0 0 0 / 0.15), inset 0 0 4px 1px #101010, inset 0 0 4px 2px rgb(255 255 255 / 0.1);
  --shadow-primary-pressed: inset 0 2px 3px rgb(0 0 0 / 0.7), inset 0 0 0 1px #000000;
  --shadow-primary-phone: 0 2px 4px -1px rgb(0 0 0 / 0.2), 0 6px 12px -4px rgb(0 0 0 / 0.25), inset 0 0 4px 1px #101010, inset 0 0 4px 2px rgb(255 255 255 / 0.1);
  --shadow-critical: 0 1px 1px -0.5px rgb(0 0 0 / 0.15), inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px #B01E17;
  /* زرُّ الخطر مضغوطًا: ظلٌّ داخليّ (components.md §1) */
  --shadow-critical-pressed: inset 0 2px 3px rgb(0 0 0 / 0.45);
  /* زجاجُ «اسأل Mico» — مساحةٌ صغيرة عائمة */
  --ask-bar-bg: rgb(255 255 255 / 0.86);
  --ask-bar-blur: 12px;

  /* الحركة — opacity وtransform وحدهما */
  --dur-press: 100ms;
  --dur-hover: 150ms;
  --dur-popover: 200ms;
  --dur-modal: 250ms;
  --dur-sheet: 300ms;
  --dur-exit: 150ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* الإطارُ اللامع على الخطط العليا (`.plan-shine` · «الخطة والفوترة» خ1): سُمكُه ودورتُه — يدور بـtransform وحدَه */
  --plan-shine-w: 2px;
  --dur-plan-shine: 6s;
}

.dark {
  --surface-subdued: #1D1D20;
  --surface-pressed: #242428;
  --text-strong-2: #DCDCDF;
  --text-muted: #9E9EA5;
  --text-placeholder: #8A8A91;
  --border-input: #6B6B73;
  --mico-blue: #4C8DFF;
  --critical-hover: #FF7368;
  --critical-active: #E5372B;
  --text-profit: #5CD27A;
  --text-loss: #FF8E84;
  --text-late: #F5A65B;
  --alert-info-bg: #15284D;
  --alert-info-ring: #2D4B85;
  --alert-info-text: #B3CCFF;
  --alert-info-icon: #7AA7FF;
  --alert-success-bg: #12321C;
  --alert-success-ring: #1F4D2C;
  --alert-success-text: #A3E6AE;
  --alert-success-icon: #5CD27A;
  --alert-warning-bg: #3D2510;
  --alert-warning-ring: #5C3A1A;
  --alert-warning-text: #FFC28F;
  --alert-warning-icon: #F5A65B;
  --alert-critical-bg: #3D1714;
  --alert-critical-ring: #5C2622;
  --alert-critical-text: #FFB4AB;
  --alert-critical-icon: #FF8E84;
  --toast-bg: #F2F2F3;
  --toast-text: #161618;
  --badge-new-bg: #3A3110;
  --badge-new-text: #F5D96B;
  --badge-confirmed-bg: #332841;
  --badge-confirmed-fg: #EAD2FF;
  --badge-shipped-bg: #15284D;
  --badge-shipped-text: #B3CCFF;
  --badge-delivered-bg: #12321C;
  --badge-delivered-text: #A3E6AE;
  --badge-returned-bg: #3D1714;
  --badge-returned-text: #FFB4AB;
  --badge-cancelled-bg: #242428;
  --badge-cancelled-text: #B4B4BA;
  --badge-at-risk-bg: #3D2510;
  --badge-at-risk-text: #FFC28F;
  --badge-packing-bg: #3A3110;
  --badge-packing-text: #F5D96B;
  --badge-unshipped-bg: #242428;
  --badge-unshipped-text: #B4B4BA;
  --shadow-button: 0 0 0 1px rgb(255 255 255 / 0.14), 0 1px 0 rgb(255 255 255 / 0.07);
  --shadow-button-pressed: 0 0 0 1px rgb(255 255 255 / 0.14), inset 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-card-hover: 0 0 0 1px rgb(255 255 255 / 0.14), 0 2px 4px rgb(255 255 255 / 0.08), 0 8px 20px rgb(255 255 255 / 0.07);
  --shadow-modal: 0 0 0 1px rgb(255 255 255 / 0.11), 0 24px 48px -12px rgb(0 0 0 / 0.7);
  --shadow-panel-light: 0 0 0 1px rgb(255 255 255 / 0.08);
  --shadow-phone-card: 0 0 0 1px rgb(255 255 255 / 0.1), 0 1px 2px rgb(255 255 255 / 0.07);
  /* الزرّ الأساسيّ الفاتح بلمعةٍ بيضاء خفيفة بدل الزرقاء */
  --gloss-primary: radial-gradient(50% 50% at 50% 0%, rgb(255 255 255 / 0.6) 0%, rgb(255 255 255 / 0) 100%);
  --gloss-primary-hover: radial-gradient(50% 50% at 50% 0%, rgb(255 255 255 / 0.8) 0%, rgb(255 255 255 / 0) 100%);
  --shadow-primary: 0 1px 1px -0.5px rgb(0 0 0 / 0.4), inset 0 0 0 1px rgb(255 255 255 / 0.5);
  --shadow-primary-pressed: inset 0 2px 3px rgb(0 0 0 / 0.25);
  --shadow-primary-phone: var(--shadow-primary);
  --shadow-critical: inset 0 1px 0 rgb(255 255 255 / 0.18);
  --shadow-critical-pressed: inset 0 2px 3px rgb(0 0 0 / 0.3);
  --ask-bar-bg: rgb(22 22 24 / 0.86);
}

/* ---------- الإطار والقائمة الجانبيّة — ثيمان مستقلّان عن الوضع الداكن ----------
   `data-frame` على <html> (`app/layout.tsx`)، والافتراضيُّ "dark". زرُّ «الوضع الداكن» يقلب
   المحتوى وحده (`.dark`)؛ الإطارُ والقائمةُ يبقيان على ثيمهما. والفاتحُ جاهزٌ بلا زرٍّ يختاره
   (قرارُ DHN 2026-10-24: الداكنُ وحده). تقرؤه المرحلة 3. */
:root,
[data-frame="dark"] {
  --frame-bg: #0B0B0C;
  /* أسفلَ القائمة وحدها */
  --frame-glow: linear-gradient(0deg, rgb(38 112 255 / 0.5) 0%, rgb(38 112 255 / 0.2) 5%, rgb(38 112 255 / 0) 24%);
  --nav-text: #E3E3E3;
  /* عناوين المجموعات */
  --nav-muted: #A3A3A3;
  --nav-icon: #B5B5B5;
  --nav-sub-text: #C9C9C9;
  --nav-hover-bg: rgb(255 255 255 / 0.06);
  --nav-pressed-bg: rgb(255 255 255 / 0.1);
  --nav-selected-bg: #2A2A2D;
  --nav-selected-text: #FFFFFF;
  --nav-selected-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --nav-focus: inset 0 0 0 2px #5A96FF;
  --nav-disabled-text: #6B6B6B;
  --nav-search-bg: #1C1C1E;
  --nav-search-ring: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  --nav-search-text: #A3A3A3;
  --nav-kbd-bg: #2A2A2D;
  --nav-soon-bg: rgb(38 112 255 / 0.2);
  --nav-soon-text: #A9C8FF;
  --nav-divider: rgb(255 255 255 / 0.1);
  --nav-logo-outer: #FFFFFF;
  /* اللوحةُ البيضاء على الإطار الأسود */
  --panel-shadow: none;
  /* شريط الهاتف السفلي */
  --tabbar-bg: #0B0B0C;
  --tabbar-text: #9A9A9A;
  --tabbar-text-active: #FFFFFF;
  --tabbar-pressed-bg: #1C1C1E;
}

[data-frame="light"] {
  --frame-bg: #EBEBEB;
  --frame-glow: none;
  --nav-text: #1F1F1F;
  --nav-muted: #5C5C5C;
  --nav-icon: #4A4A4A;
  --nav-sub-text: #3A3A3A;
  --nav-hover-bg: rgb(0 0 0 / 0.05);
  --nav-pressed-bg: rgb(0 0 0 / 0.08);
  --nav-selected-bg: #FFFFFF;
  --nav-selected-text: #101010;
  --nav-selected-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.08);
  --nav-focus: inset 0 0 0 2px #2670FF;
  --nav-disabled-text: #A3A3A3;
  --nav-search-bg: #FFFFFF;
  --nav-search-ring: 0 0 0 1px rgb(0 0 0 / 0.08);
  --nav-search-text: #6B6B6B;
  --nav-kbd-bg: #F1F1F1;
  --nav-soon-bg: #E0ECFF;
  --nav-soon-text: #0B3A8C;
  --nav-divider: rgb(0 0 0 / 0.08);
  --nav-logo-outer: #101010;
  --panel-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.06);
  --tabbar-bg: #FFFFFF;
  --tabbar-text: #6B6B6B;
  --tabbar-text-active: #101010;
  --tabbar-pressed-bg: #F1F1F1;
}

/* ---------- إطفاء التأثيرات ----------
   `.fx-off` على <html> حين: ذاكرة الجهاز ≤ 4GB (navigator.deviceMemory)، أو
   prefers-reduced-transparency / prefers-reduced-motion — كشفُه في المرحلة 2.
   تطفئ اللمعة والتوهّج والتغبيش وتُبقي الألوان المصمتة. */
.fx-off {
  --gloss-primary: none;
  --gloss-primary-hover: none;
  --shadow-primary: none;
  --shadow-primary-phone: none;
  --frame-glow: none;
  --ask-bar-blur: 0px;
  --ask-bar-bg: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms;
    --dur-hover: 0ms;
    --dur-popover: 0ms;
    --dur-modal: 0ms;
    --dur-sheet: 0ms;
    --dur-exit: 0ms;
  }
}

/* =============================================================================
   ربط متغيّرات shadcn/ui بلوحة DHN
   حتى ترث كل مكوّنات components/ui الهوية تلقائيًا دون تعديل ملفاتها.

   ملاحظة: --border مشترك بين اللوحتين بنفس المعنى، فلا يُعاد تعريفه هنا
   (إعادة تعريفه بـ var(--border) تنشئ مرجعًا دائريًا يُبطل المتغيّر).
   والمتغيّرات ترث تلقائيًا، فيكفي :root — الوضع الداكن يغلبها بأسبقية .dark.
   ========================================================================== */
:root {
  --background: var(--surface-page);
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --popover: var(--surface);
  --popover-foreground: var(--text);
  --primary: var(--action-primary);
  --primary-foreground: var(--text-on-fill);
  --secondary: var(--surface-secondary);
  --secondary-foreground: var(--text);
  --muted: var(--surface-secondary);
  --muted-foreground: var(--text-secondary);
  --accent: var(--surface-hover);
  --accent-foreground: var(--text);
  --destructive: var(--fill-critical);
  --input: var(--border);
  --ring: var(--border-focus);
  --sidebar: var(--surface);
  --sidebar-foreground: var(--text);
  --sidebar-primary: var(--action-primary);
  --sidebar-primary-foreground: var(--text-on-fill);
  --sidebar-accent: var(--surface-hover);
  --sidebar-accent-foreground: var(--text);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--border-focus);
}

/* =============================================================================
   «Hi Mico Studio» — عالمُه الداكن الخاصّ (المولِّد بالذكاء · المرحلة 1)
   قرارُ DHN (الجولة 2 ج8 · ج10): الاستوديو داكنٌ دائمًا وثيمُه غيرُ ثيم المنصّة — «مثل Higgsfield بالضبط + لمستنا».
   يُفعَّل بصنف `.studio` على جذر سطحه وحدَه (`app/(studio)`) — فلا يمسّ ثيمَ المنصّة ولا وضعَها الفاتح أو الداكن.
   **ولونٌ حيٌّ واحد** (`--studio-accent`) للفعل الرئيسيّ والمختار — مرّةً في الشاشة كقاعدة المنصّة.
   وتُعاد خرائطُ رموز المنصّة وshadcn داخله فترث مكوّناتُ `components/ui` و`components/shared` الظلمةَ بلا تعديل.
   ========================================================================== */
.studio {
  --studio-canvas: #0B0C0E;
  --studio-page: #0F1113;
  --studio-panel: #16181B;
  --studio-raised: #1D2024;
  --studio-hover: #252930;
  --studio-line: #2A2E34;
  --studio-line-strong: #3A3F46;
  --studio-text: #F3F4F5;
  --studio-text-2: #A6ABB3;
  --studio-text-3: #737881;
  --studio-accent: #D7FF3A;
  --studio-accent-ink: #11140A;
  --studio-accent-soft: rgb(215 255 58 / 0.12);
  --studio-hot: #FF4FA3;
  --studio-hot-ink: #2A0716;
  --studio-sky: #6FD3FF;
  --studio-ok: #3DDC97;
  --studio-danger: #FF6B6B;
  --studio-scrim: rgb(5 6 7 / 0.78);
  --studio-danger-soft: rgb(255 107 107 / 0.08);
  --studio-danger-line: rgb(255 107 107 / 0.35);
  --studio-accent-ink-soft: rgb(17 20 10 / 0.12);
  --studio-accent-glow: rgb(215 255 58 / 0.45);
  --studio-shadow-pop: 0 24px 60px -20px rgb(0 0 0 / 0.8);

  /* رموزُ المنصّة داخل الاستوديو */
  --surface-page: var(--studio-page);
  --surface: var(--studio-panel);
  --surface-secondary: var(--studio-raised);
  --surface-tertiary: var(--studio-raised);
  --surface-hover: var(--studio-hover);
  --surface-active: var(--studio-hover);
  --surface-selected: var(--studio-hover);
  --text: var(--studio-text);
  --text-secondary: var(--studio-text-2);
  --text-disabled: var(--studio-text-3);
  --border: var(--studio-line);
  --border-focus: var(--studio-accent);
  --scrim: var(--studio-scrim);

  /* shadcn */
  --background: var(--studio-page);
  --foreground: var(--studio-text);
  --card: var(--studio-panel);
  --card-foreground: var(--studio-text);
  --popover: var(--studio-raised);
  --popover-foreground: var(--studio-text);
  --primary: var(--studio-accent);
  --primary-foreground: var(--studio-accent-ink);
  --secondary: var(--studio-raised);
  --secondary-foreground: var(--studio-text);
  --muted: var(--studio-raised);
  --muted-foreground: var(--studio-text-2);
  --accent: var(--studio-hover);
  --accent-foreground: var(--studio-text);
  --destructive: var(--studio-danger);
  --input: var(--studio-line);
  --ring: var(--studio-accent);

  color-scheme: dark;
  background: var(--studio-page);
  color: var(--studio-text);
}