/* ==========================================================================
   قَدَرنا — Design System Tokens
   مُولَّد من ملف Figma: pReRuJXkYd3W5NPcE684zR
   194 متغيّراً · 6 مجموعات · مطابق حرفياً لقيم Figma

   الطبقات:
     1) Primitives      — ثابتة، لا تُستخدم داخل المكوّنات مباشرة
     2) Semantic Color  — تتغيّر مع الثيم (Light / Dark)
     3) Dimensions · Typography · Motion · Icon Context

   قاعدة ملزمة من نظام التصميم نفسه:
   «المكوّنات لا تستخدم Primitives مباشرة. استخدم Semantic tokens دائماً
    حتى يعمل Light/Dark وتبقى الهوية قابلة للتطوير.»
   ========================================================================== */

/* ── 1) PRIMITIVES ─────────────────────────────────── Collection: Primitives
   وضع واحد (Value). مرجع الهوية والتباين فقط.                              */
:root {
  /* base */
  --p-base-white:            #ffffff;
  --p-base-black:            #000000;
  --p-base-transparent:      rgba(0, 0, 0, 0);

  /* neutral */
  --p-neutral-50:            #f7faf8;
  --p-neutral-100:           #eff5f2;
  --p-neutral-200:           #e6efeb;
  --p-neutral-300:           #dce7e2;
  --p-neutral-400:           #c7d8d1;
  --p-neutral-500:           #9aaea6;
  --p-neutral-600:           #6b7974;
  --p-neutral-700:           #4b5a55;
  --p-neutral-800:           #35443f;
  --p-neutral-900:           #14201d;
  --p-neutral-950:           #08120f;
  --p-neutral-accessibility-muted: #5f6f69;   /* بديل وصولي لـ neutral/600 */

  /* dark-surface */
  --p-dark-surface-50:       #0c1713;
  --p-dark-surface-100:      #101c18;
  --p-dark-surface-200:      #16241f;
  --p-dark-surface-300:      #1b2c25;
  --p-dark-surface-400:      #253930;
  --p-dark-surface-500:      #365046;

  /* teal */
  --p-teal-50:               #f0fdfa;
  --p-teal-100:              #ccfbf1;
  --p-teal-200:              #99f6e4;
  --p-teal-300:              #5eead4;
  --p-teal-400:              #2dd4bf;
  --p-teal-500:              #14b8a6;
  --p-teal-600:              #0d9488;
  --p-teal-700:              #0f766e;
  --p-teal-800:              #115e59;
  --p-teal-900:              #134e4a;
  --p-teal-950:              #042f2e;

  /* sage */
  --p-sage-50:               #f6f9f8;
  --p-sage-100:              #e5efec;
  --p-sage-200:              #cdddd8;
  --p-sage-300:              #b2ccc5;
  --p-sage-400:              #91b8ad;
  --p-sage-500:              #6f9a8e;
  --p-sage-600:              #648f84;
  --p-sage-700:              #4f736b;
  --p-sage-800:              #3a5751;
  --p-sage-900:              #253a35;
  --p-sage-950:              #14241f;

  /* champagne */
  --p-champagne-50:          #fbf8f1;
  --p-champagne-100:         #f4ebd9;
  --p-champagne-200:         #e9d8b7;
  --p-champagne-300:         #e3c98f;
  --p-champagne-400:         #c8a86b;
  --p-champagne-500:         #b89450;
  --p-champagne-600:         #9e7b3e;
  --p-champagne-700:         #765a28;
  --p-champagne-800:         #5b451f;
  --p-champagne-900:         #3d2f18;
  --p-champagne-950:         #241b0e;

  /* brand — ثابتة في الشعار والسوشيال، لا تتغيّر مع الثيم */
  --p-brand-teal:            #0f766e;
  --p-brand-sage:            #6f9a8e;
  --p-brand-champagne:       #c8a86b;

  /* status */
  --p-success-50:            #dff2e9;
  --p-success-300:           #69cda3;
  --p-success-600:           #2e8665;
  /* 600 يعطي 4.45:1 على الأبيض و3.82 على success-50 — دون عتبة AA؛
     700 يرفعها إلى 7.02 و6.02 مع بقاء النبرة نفسها. */
  --p-success-700:           #22644b;
  --p-warning-50:            #f7edd8;
  --p-warning-300:           #e6c06e;
  --p-warning-600:           #b38332;
  /* 600 يعطي 3.38:1 على الأبيض و2.91 على warning-50 — أسوأ فجوة في النظام؛
     700 يرفعها إلى 6.19 و5.32. */
  --p-warning-700:           #7d5b23;
  --p-danger-50:             #f8e4e5;
  --p-danger-100:            #f7d7d9;
  --p-danger-200:            #f3bcc0;
  --p-danger-300:            #ed9a9f;
  --p-danger-600:            #b75c62;
  --p-danger-700:            #9f454c;
  --p-danger-800:            #7f333a;
  --p-danger-900:            #66282e;

  --p-status-success-dark-soft: #14382d;
  --p-status-warning-dark-soft: #352c17;
  --p-status-danger-dark-soft:  #3a2024;

  /* overlay */
  --p-overlay-black-56:      rgba(0, 0, 0, 0.56);
  --p-overlay-black-72:      rgba(0, 0, 0, 0.72);
}

/* ── 2) SEMANTIC COLOR · LIGHT ─────────────────────────── Collection: Color
   55 متغيّراً دلالياً. هذه — لا الـPrimitives — ما تستخدمه المكوّنات.       */
/* الجذر أو أي حاوية متداخلة — يسمح بعرض عيّنات الوضع الفاتح داخل صفحة
   داكنة، مقابلًا لقاعدة الوضع الداكن أدناه. لازم للقسم ١٦ حيث تتجاور
   نسخ Light وDark في صفّ واحد. */
:root,
:root[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;

  /* backgrounds & surfaces */
  --bg-base:                 var(--p-neutral-50);
  --bg-elevated:             var(--p-base-white);
  --surface-default:         var(--p-base-white);
  --surface-subtle:          var(--p-neutral-100);
  --surface-strong:          var(--p-neutral-200);
  --surface-overlay:         var(--p-base-white);

  /* text */
  --text-primary:            var(--p-neutral-900);
  --text-secondary:          var(--p-neutral-800);
  --text-muted:              var(--p-neutral-accessibility-muted);
  --text-inverse:            var(--p-base-white);
  --text-on-action:          var(--p-base-white);
  --text-premium:            var(--p-champagne-700);
  --text-link:               var(--p-teal-700);
  /* 600 (#b75c62) يعطي 4.45:1 على الأبيض — أقل من عتبة AA للنص الصغير بفارق
     ضئيل؛ 700 يرفعها إلى 6.1:1 دون تغيير محسوس في النبرة. */
  --text-danger:             var(--p-danger-700);
  --text-success:            var(--p-success-700);
  --text-warning:            var(--p-warning-700);

  /* borders */
  --border-default:          var(--p-neutral-300);
  --border-strong:           var(--p-neutral-400);
  --border-focus:            var(--p-teal-700);
  /* حدّ عناصر التحكّم التفاعلية — WCAG 1.4.11 يطلب 3:1 لما يُعرّف المكوّن.
     border-default يعطي 1.27 فاتحًا و1.55 داكنًا، فلا يميّز الحقل عمّا حوله.
     neutral-600 يعبر العتبة في السمتين: 4.55 على الأبيض و3.84 على البطاقة الداكنة.
     يخصّ الحقول ومربّعات الاختيار وحدها — الفواصل وحدود البطاقات تبقى خفيفة. */
  --border-control:          var(--p-neutral-600);
  --border-control-hover:    var(--p-neutral-700);   /* أغمق من الساكن على الفاتح */
  /* سطح مقلوب للتلميحات والرقاقات الداكنة: كان المكوّن يستعمل --text-primary
     خلفيةً، فينقلب في الوضع الداكن إلى #f7faf8 ويصير النصّ الأبيض 1.05:1. */
  --surface-inverse:         var(--p-neutral-900);
  --text-on-inverse:         var(--p-neutral-50);
  --accent-on-inverse:       var(--p-teal-300);     /* لمسة teal على السطح المقلوب — 10.9:1 على neutral/900 */

  /* action · primary */
  --action-primary-default:  var(--p-teal-700);
  --shadow-card-hover:       0 8px 24px rgb(15 118 110 / 0.08);
  --action-primary-hover:    var(--p-teal-800);
  --action-primary-pressed:  var(--p-teal-900);
  --action-primary-soft:     var(--p-teal-100);
  --action-primary-subtle:   var(--p-teal-50);

  /* action · secondary */
  /* الأبيض على sage-600 يعطي 3.62 — الأزرار الثانوية كانت ترسب في AA؛
     السلّم كله يُزاح درجةً واحدة فتصبح 5.2 مع بقاء التدرّج بين الحالات. */
  --action-secondary-default: var(--p-sage-700);
  --action-secondary-hover:   var(--p-sage-800);
  --action-secondary-pressed: var(--p-sage-900);
  --action-secondary-soft:    var(--p-sage-100);

  /* action · outline */
  --action-outline-default:  var(--p-base-transparent);
  --action-outline-hover:    var(--p-teal-50);
  --action-outline-pressed:  var(--p-teal-100);

  /* action · ghost */
  --action-ghost-default:    var(--p-base-transparent);
  --action-ghost-hover:      var(--p-teal-50);
  --action-ghost-pressed:    var(--p-teal-100);

  /* action · danger */
  /* الأبيض على danger-600 يعطي 4.45 — أقلّ من AA؛ السلّم يُزاح درجةً. */
  --action-danger-default:   var(--p-danger-700);
  --action-danger-hover:     var(--p-danger-800);
  --action-danger-pressed:   var(--p-danger-900);

  /* action · disabled */
  --action-disabled-bg:      var(--p-neutral-200);
  --action-disabled-fg:      var(--p-neutral-600);

  /* accent — Champagne. لمسات فقط، ليس CTA أساسياً */
  --accent-default:          var(--p-champagne-500);
  --accent-hover:            var(--p-champagne-600);
  --accent-foreground:       var(--p-champagne-700);
  --accent-soft:             var(--p-champagne-100);

  /* status */
  --status-success-default:  var(--p-success-600);
  --status-success-soft:     var(--p-success-50);
  --status-warning-default:  var(--p-warning-600);
  --status-warning-soft:     var(--p-warning-50);
  --status-danger-default:   var(--p-danger-600);
  --status-danger-soft:      var(--p-danger-50);
  /* تعبئة مصمتة للتنبيهات والشارات والرقاقات: الأبيض على 600 لا يبلغ AA
     (danger 4.45 · warning 3.38). المصمت يأخذ 700 ونصًّا فاتحًا، والتحذير
     يبقى 600 بنصّ داكن. في الوضع الداكن تنقلب الدرجات إلى 300 بنصّ داكن. */
  --status-success-strong:   var(--p-success-700);
  --status-warning-strong:   var(--p-warning-600);
  --status-danger-strong:    var(--p-danger-700);
  --text-on-success:         var(--p-base-white);
  --text-on-warning:         var(--p-neutral-900);
  --text-on-danger:          var(--p-base-white);
  --status-info-default:     var(--p-teal-700);
  --status-info-soft:        var(--p-teal-50);

  /* icon */
  --icon-primary:            var(--p-neutral-900);
  --icon-muted:              var(--p-neutral-accessibility-muted);
  --icon-accent:             var(--p-teal-700);
  --icon-on-action:          var(--p-base-white);

  /* overlay */
  --overlay-scrim:           var(--p-overlay-black-56);

  /* ── إضافات إصلاحية (غير موجودة في Figma) ──────────────────────────
     السبب موثق في قسم الغلاف: استخدام accent/default فوق سطح action
     يفشل التباين في الوضعين. هذان التوكنان يصلحان ذلك بلا تغيير الهوية. */

  /* لمسة Champagne فوق سطح action — الخلفية هنا teal/700 الداكنة */
  --accent-on-action:        var(--p-champagne-100);   /* 4.62:1 ✅ */

  /* لون زخرفي — يفصل الزخرفة عن توكنات الأفعال */
  --decor-sage:              var(--p-sage-600);
  --decor-champagne:         var(--p-champagne-400);
}

/* ── SEMANTIC COLOR · DARK ────────────────────────────────────────────────
   ليست أسود خالصاً — تحافظ على روح Teal. قرار تصميمي مقصود.               */
/* الجذر أو أي حاوية متداخلة — يسمح بعرض عيّنات الوضع الداكن
   داخل صفحة فاتحة، كما في لوحة Figma حيث القسمان متجاوران. */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;

  --bg-base:                 var(--p-neutral-950);
  --bg-elevated:             var(--p-dark-surface-50);
  --surface-default:         var(--p-dark-surface-100);
  --surface-subtle:          var(--p-dark-surface-200);
  --surface-strong:          var(--p-dark-surface-300);
  --surface-overlay:         var(--p-dark-surface-200);

  --text-primary:            var(--p-neutral-50);
  --text-secondary:          var(--p-neutral-200);
  --text-muted:              var(--p-neutral-400);
  --text-inverse:            var(--p-neutral-950);
  --text-on-action:          var(--p-teal-950);
  --text-premium:            var(--p-champagne-300);
  --text-link:               var(--p-teal-300);
  --text-danger:             var(--p-danger-300);
  --text-success:            var(--p-success-300);
  --text-warning:            var(--p-warning-300);

  --border-default:          var(--p-dark-surface-400);
  --border-strong:           var(--p-dark-surface-500);
  --border-focus:            var(--p-teal-300);
  --border-control:          var(--p-neutral-600);
  --border-control-hover:    var(--p-neutral-500);   /* أفتح من الساكن على الداكن */

  --action-primary-default:  var(--p-teal-300);
  /* teal بشفافية 8% غير مرئي فوق سطح داكن — الظلّ يصير أسود شفّافًا */
  --shadow-card-hover:       0 8px 24px rgb(0 0 0 / 0.45);
  --action-primary-hover:    var(--p-teal-200);
  --action-primary-pressed:  var(--p-teal-100);
  --action-primary-soft:     var(--p-teal-900);
  --action-primary-subtle:   var(--p-teal-950);

  --action-secondary-default: var(--p-sage-400);
  --action-secondary-hover:   var(--p-sage-300);
  --action-secondary-pressed: var(--p-sage-200);
  --action-secondary-soft:    var(--p-sage-900);

  --action-outline-default:  var(--p-base-transparent);
  --action-outline-hover:    var(--p-teal-950);
  --action-outline-pressed:  var(--p-teal-900);

  --action-ghost-default:    var(--p-base-transparent);
  --action-ghost-hover:      var(--p-teal-950);
  --action-ghost-pressed:    var(--p-teal-900);

  --action-danger-default:   var(--p-danger-300);
  --action-danger-hover:     var(--p-danger-200);
  --action-danger-pressed:   var(--p-danger-100);

  --action-disabled-bg:      var(--p-dark-surface-400);
  --action-disabled-fg:      var(--p-neutral-400);

  --accent-default:          var(--p-champagne-300);
  --accent-hover:            var(--p-champagne-200);
  --accent-foreground:       var(--p-champagne-300);
  --accent-soft:             var(--p-champagne-900);

  --surface-inverse:         var(--p-dark-surface-400);
  --text-on-inverse:         var(--p-neutral-50);
  --accent-on-inverse:       var(--p-teal-300);     /* 7.0:1 على dark-surface/400 */

  --status-success-default:  var(--p-success-300);
  --status-success-soft:     var(--p-status-success-dark-soft);
  --status-warning-default:  var(--p-warning-300);
  --status-warning-soft:     var(--p-status-warning-dark-soft);
  --status-danger-default:   var(--p-danger-300);
  --status-danger-soft:      var(--p-status-danger-dark-soft);
  --status-success-strong:   var(--p-success-300);
  --status-warning-strong:   var(--p-warning-300);
  --status-danger-strong:    var(--p-danger-300);
  --text-on-success:         var(--p-neutral-950);
  --text-on-warning:         var(--p-neutral-950);
  --text-on-danger:          var(--p-neutral-950);
  --status-info-default:     var(--p-teal-300);
  --status-info-soft:        var(--p-teal-950);

  --icon-primary:            var(--p-neutral-50);
  --icon-muted:              var(--p-neutral-400);
  --icon-accent:             var(--p-teal-300);
  --icon-on-action:          var(--p-teal-950);

  --overlay-scrim:           var(--p-overlay-black-72);

  /* إضافات إصلاحية — الخلفية في الوضع الداكن teal/300 الفاتحة،
     فيلزم Champagne داكن بدل الفاتح */
  --accent-on-action:        var(--p-champagne-800);   /* 6.13:1 ✅ */
  --decor-sage:              var(--p-sage-400);
  --decor-champagne:         var(--p-champagne-300);
}

/* ── 3) DIMENSIONS ───────────────────────────────── Collection: Dimensions */
:root {
  /* spacing — قاعدة 4px */
  --space-0:                 0px;
  --space-1:                 4px;
  --space-2:                 8px;
  --space-3:                 12px;
  --space-4:                 16px;
  --space-5:                 20px;
  --space-6:                 24px;
  --space-8:                 32px;
  --space-10:                40px;
  --space-12:                48px;
  --space-16:                64px;
  --space-20:                80px;
  --space-24:                96px;

  /* radius */
  --radius-none:             0px;
  --radius-sm:               10px;   /* الحقول والchips */
  --radius-md:               14px;   /* الأزرار والتنبيهات */
  --radius-lg:               20px;   /* البطاقات */
  --radius-xl:               28px;   /* الحاويات التسويقية فقط */
  --radius-full:             9999px;

  /* control sizes */
  --size-control-sm:         36px;
  --size-control-md:         44px;
  --size-control-lg:         52px;

  /* icon sizes */
  --size-icon-sm:            16px;
  --size-icon-md:            20px;
  --size-icon-lg:            24px;

  /* الحد الأدنى لهدف اللمس — غير قابل للتفاوض */
  --size-touch-min:          44px;

  /* stroke */
  --stroke-default:          1px;
  --stroke-strong:           2px;

  /* opacity */
  --opacity-disabled:        0.42;
  --opacity-subdued:         0.64;
  --opacity-overlay:         0.56;
}

/* ── 4) TYPOGRAPHY ───────────────────────────────── Collection: Typography */
:root {
  --family-cairo:            "Cairo";
  --font-stack:              var(--family-cairo), "Noto Sans Arabic",
                             system-ui, -apple-system, "Segoe UI", sans-serif;

  --style-regular:           400;
  --style-medium:            500;
  --style-semibold:          600;
  --style-bold:              700;
  --style-extrabold:         800;

  --size-caption:            12px;
  --size-body-sm:            14px;
  --size-body-md:            16px;
  --size-body-lg:            18px;
  --size-heading-sm:         20px;
  --size-heading-md:         24px;
  --size-heading-lg:         32px;
  --size-heading-xl:         40px;
  --size-display-lg:         48px;
  --size-display-hero:       64px;

  --line-caption:            20px;
  --line-body-sm:            24px;
  --line-body-md:            28px;
  --line-body-lg:            32px;
  --line-heading-sm:         32px;
  --line-heading-md:         36px;
  --line-heading-lg:         48px;
  --line-display:            64px;
  --line-display-hero:       80px;   /* Display/Hero 64/80 — كان مدمجًا في --line-display */
  --line-heading-xl:         56px;

  /* label — عائلة Figma الناقصة من التوكنز */
  --size-label-lg:           16px;
  --size-label-md:           14px;
  --size-label-sm:           12px;
  --line-label-lg:           24px;
  --line-label-md:           22px;
  --line-label-sm:           20px;
}

/* ── 5) MOTION ───────────────────────────────────────── Collection: Motion */
:root {
  --duration-instant:        0ms;
  --duration-fast:           120ms;
  --duration-base:           180ms;
  --duration-slow:           280ms;
  --duration-xslow:          420ms;

  --easing-standard:         cubic-bezier(0.2, 0, 0, 1);
  --easing-enter:            cubic-bezier(0, 0, 0, 1);
  --easing-exit:             cubic-bezier(0.3, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:  0ms;
    --duration-base:  0ms;
    --duration-slow:  0ms;
    --duration-xslow: 0ms;
  }
}

/* ── 6) ICON CONTEXT ───────────────────────────── Collection: Icon Context
   متغيّر واحد بأربعة أوضاع. المكوّن الأب يحدد الوضع، وكل المسارات ترث اللون.
   يمنع ظهور أيقونة داكنة داخل زر ممتلئ.                                    */
:root                      { --icon-foreground: var(--icon-primary); }
[data-icon-context="primary"]   { --icon-foreground: var(--icon-primary); }
[data-icon-context="muted"]     { --icon-foreground: var(--icon-muted); }
[data-icon-context="accent"]    { --icon-foreground: var(--icon-accent); }
[data-icon-context="on-action"] { --icon-foreground: var(--icon-on-action); }

/* ══════════════════════════════════════════════════════════════════════
   أسماء CSS الموثّقة داخل Figma
   صفحة «02 — Foundations · Color» تعرض تحت كل عيّنة اسم المتغيّر:
       primitives →  var(--primitive-<path>)
       semantic   →  var(--color-<path>)
   الأسماء المختصرة أعلاه تبقى صالحة، وهذه أسماء رسمية مطابقة للتوثيق
   حتى لا يكذب نظام التصميم على نفسه.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --primitive-base-white:                    var(--p-base-white);
  --primitive-base-black:                    var(--p-base-black);
  --primitive-base-transparent:              var(--p-base-transparent);
  --primitive-neutral-50:                    var(--p-neutral-50);
  --primitive-neutral-100:                   var(--p-neutral-100);
  --primitive-neutral-200:                   var(--p-neutral-200);
  --primitive-neutral-300:                   var(--p-neutral-300);
  --primitive-neutral-400:                   var(--p-neutral-400);
  --primitive-neutral-500:                   var(--p-neutral-500);
  --primitive-neutral-600:                   var(--p-neutral-600);
  --primitive-neutral-700:                   var(--p-neutral-700);
  --primitive-neutral-800:                   var(--p-neutral-800);
  --primitive-neutral-900:                   var(--p-neutral-900);
  --primitive-neutral-950:                   var(--p-neutral-950);
  --primitive-neutral-accessibility-muted:   var(--p-neutral-accessibility-muted);
  --primitive-dark-surface-50:               var(--p-dark-surface-50);
  --primitive-dark-surface-100:              var(--p-dark-surface-100);
  --primitive-dark-surface-200:              var(--p-dark-surface-200);
  --primitive-dark-surface-300:              var(--p-dark-surface-300);
  --primitive-dark-surface-400:              var(--p-dark-surface-400);
  --primitive-dark-surface-500:              var(--p-dark-surface-500);
  --primitive-teal-50:                       var(--p-teal-50);
  --primitive-teal-100:                      var(--p-teal-100);
  --primitive-teal-200:                      var(--p-teal-200);
  --primitive-teal-300:                      var(--p-teal-300);
  --primitive-teal-400:                      var(--p-teal-400);
  --primitive-teal-500:                      var(--p-teal-500);
  --primitive-teal-600:                      var(--p-teal-600);
  --primitive-teal-700:                      var(--p-teal-700);
  --primitive-teal-800:                      var(--p-teal-800);
  --primitive-teal-900:                      var(--p-teal-900);
  --primitive-teal-950:                      var(--p-teal-950);
  --primitive-sage-50:                       var(--p-sage-50);
  --primitive-sage-100:                      var(--p-sage-100);
  --primitive-sage-200:                      var(--p-sage-200);
  --primitive-sage-300:                      var(--p-sage-300);
  --primitive-sage-400:                      var(--p-sage-400);
  --primitive-sage-500:                      var(--p-sage-500);
  --primitive-sage-600:                      var(--p-sage-600);
  --primitive-sage-700:                      var(--p-sage-700);
  --primitive-sage-800:                      var(--p-sage-800);
  --primitive-sage-900:                      var(--p-sage-900);
  --primitive-sage-950:                      var(--p-sage-950);
  --primitive-champagne-50:                  var(--p-champagne-50);
  --primitive-champagne-100:                 var(--p-champagne-100);
  --primitive-champagne-200:                 var(--p-champagne-200);
  --primitive-champagne-300:                 var(--p-champagne-300);
  --primitive-champagne-400:                 var(--p-champagne-400);
  --primitive-champagne-500:                 var(--p-champagne-500);
  --primitive-champagne-600:                 var(--p-champagne-600);
  --primitive-champagne-700:                 var(--p-champagne-700);
  --primitive-champagne-800:                 var(--p-champagne-800);
  --primitive-champagne-900:                 var(--p-champagne-900);
  --primitive-champagne-950:                 var(--p-champagne-950);
  --primitive-brand-teal:                    var(--p-brand-teal);
  --primitive-brand-sage:                    var(--p-brand-sage);
  --primitive-brand-champagne:               var(--p-brand-champagne);
  --primitive-success-50:                    var(--p-success-50);
  --primitive-success-300:                   var(--p-success-300);
  --primitive-success-600:                   var(--p-success-600);
  --primitive-warning-50:                    var(--p-warning-50);
  --primitive-warning-300:                   var(--p-warning-300);
  --primitive-warning-600:                   var(--p-warning-600);
  --primitive-danger-50:                     var(--p-danger-50);
  --primitive-danger-100:                    var(--p-danger-100);
  --primitive-danger-200:                    var(--p-danger-200);
  --primitive-danger-300:                    var(--p-danger-300);
  --primitive-danger-600:                    var(--p-danger-600);
  --primitive-danger-700:                    var(--p-danger-700);
  --primitive-danger-800:                    var(--p-danger-800);
  --primitive-status-success-dark-soft:      var(--p-status-success-dark-soft);
  --primitive-status-warning-dark-soft:      var(--p-status-warning-dark-soft);
  --primitive-status-danger-dark-soft:       var(--p-status-danger-dark-soft);
  --primitive-overlay-black-56:              var(--p-overlay-black-56);
  --primitive-overlay-black-72:              var(--p-overlay-black-72);

  --color-bg-base:                           var(--bg-base);
  --color-bg-elevated:                       var(--bg-elevated);
  --color-surface-default:                   var(--surface-default);
  --color-surface-subtle:                    var(--surface-subtle);
  --color-surface-strong:                    var(--surface-strong);
  --color-surface-overlay:                   var(--surface-overlay);
  --color-text-primary:                      var(--text-primary);
  --color-text-secondary:                    var(--text-secondary);
  --color-text-muted:                        var(--text-muted);
  --color-text-inverse:                      var(--text-inverse);
  --color-text-on-action:                    var(--text-on-action);
  --color-text-premium:                      var(--text-premium);
  --color-text-link:                         var(--text-link);
  --color-text-danger:                       var(--text-danger);
  --color-text-success:                      var(--text-success);
  --color-border-default:                    var(--border-default);
  --color-border-strong:                     var(--border-strong);
  --color-border-focus:                      var(--border-focus);
  --color-action-primary-default:            var(--action-primary-default);
  --color-action-primary-hover:              var(--action-primary-hover);
  --color-action-primary-pressed:            var(--action-primary-pressed);
  --color-action-primary-soft:               var(--action-primary-soft);
  --color-action-primary-subtle:             var(--action-primary-subtle);
  --color-action-secondary-default:          var(--action-secondary-default);
  --color-action-secondary-hover:            var(--action-secondary-hover);
  --color-action-secondary-pressed:          var(--action-secondary-pressed);
  --color-action-secondary-soft:             var(--action-secondary-soft);
  --color-action-outline-default:            var(--action-outline-default);
  --color-action-outline-hover:              var(--action-outline-hover);
  --color-action-outline-pressed:            var(--action-outline-pressed);
  --color-action-ghost-default:              var(--action-ghost-default);
  --color-action-ghost-hover:                var(--action-ghost-hover);
  --color-action-ghost-pressed:              var(--action-ghost-pressed);
  --color-action-danger-default:             var(--action-danger-default);
  --color-action-danger-hover:               var(--action-danger-hover);
  --color-action-danger-pressed:             var(--action-danger-pressed);
  --color-action-disabled-bg:                var(--action-disabled-bg);
  --color-action-disabled-fg:                var(--action-disabled-fg);
  --color-accent-default:                    var(--accent-default);
  --color-accent-hover:                      var(--accent-hover);
  --color-accent-foreground:                 var(--accent-foreground);
  --color-accent-soft:                       var(--accent-soft);
  --color-status-success-default:            var(--status-success-default);
  --color-status-success-soft:               var(--status-success-soft);
  --color-status-warning-default:            var(--status-warning-default);
  --color-status-warning-soft:               var(--status-warning-soft);
  --color-status-danger-default:             var(--status-danger-default);
  --color-status-danger-soft:                var(--status-danger-soft);
  --color-status-info-default:               var(--status-info-default);
  --color-status-info-soft:                  var(--status-info-soft);
  --color-icon-primary:                      var(--icon-primary);
  --color-icon-muted:                        var(--icon-muted);
  --color-icon-accent:                       var(--icon-accent);
  --color-icon-on-action:                    var(--icon-on-action);
  --color-overlay-scrim:                     var(--overlay-scrim);
  --color-accent-on-action:                  var(--accent-on-action);
  --color-decor-sage:                        var(--decor-sage);
  --color-decor-champagne:                   var(--decor-champagne);
  --color-shadow-card-hover:                 var(--shadow-card-hover);
  --color-text-warning:                      var(--text-warning);
  --color-text-on-inverse:                   var(--text-on-inverse);
  --color-surface-inverse:                   var(--surface-inverse);
  --color-border-control:                    var(--border-control);
  --color-border-control-hover:              var(--border-control-hover);
  --color-accent-on-inverse:                 var(--accent-on-inverse);
  --color-status-success-strong:             var(--status-success-strong);
  --color-status-warning-strong:             var(--status-warning-strong);
  --color-status-danger-strong:              var(--status-danger-strong);
  --color-text-on-success:                   var(--text-on-success);
  --color-text-on-warning:                   var(--text-on-warning);
  --color-text-on-danger:                    var(--text-on-danger);
}

/* الأسماء الدلالية المستعارة تُحسب عند نقطة تعريفها، فلو عُرّفت في :root فقط
   احتفظت بقيمة الوضع الفاتح وورّثتها حتى داخل حاوية داكنة. تُعاد هنا داخل
   النطاق الداكن لتُحسب من جديد بقيمه.                                      */
[data-theme="dark"] {
  --color-bg-base:                           var(--bg-base);
  --color-bg-elevated:                       var(--bg-elevated);
  --color-surface-default:                   var(--surface-default);
  --color-surface-subtle:                    var(--surface-subtle);
  --color-surface-strong:                    var(--surface-strong);
  --color-surface-overlay:                   var(--surface-overlay);
  --color-text-primary:                      var(--text-primary);
  --color-text-secondary:                    var(--text-secondary);
  --color-text-muted:                        var(--text-muted);
  --color-text-inverse:                      var(--text-inverse);
  --color-text-on-action:                    var(--text-on-action);
  --color-text-premium:                      var(--text-premium);
  --color-text-link:                         var(--text-link);
  --color-text-danger:                       var(--text-danger);
  --color-text-success:                      var(--text-success);
  --color-border-default:                    var(--border-default);
  --color-border-strong:                     var(--border-strong);
  --color-border-focus:                      var(--border-focus);
  --color-action-primary-default:            var(--action-primary-default);
  --color-action-primary-hover:              var(--action-primary-hover);
  --color-action-primary-pressed:            var(--action-primary-pressed);
  --color-action-primary-soft:               var(--action-primary-soft);
  --color-action-primary-subtle:             var(--action-primary-subtle);
  --color-action-secondary-default:          var(--action-secondary-default);
  --color-action-secondary-hover:            var(--action-secondary-hover);
  --color-action-secondary-pressed:          var(--action-secondary-pressed);
  --color-action-secondary-soft:             var(--action-secondary-soft);
  --color-action-outline-default:            var(--action-outline-default);
  --color-action-outline-hover:              var(--action-outline-hover);
  --color-action-outline-pressed:            var(--action-outline-pressed);
  --color-action-ghost-default:              var(--action-ghost-default);
  --color-action-ghost-hover:                var(--action-ghost-hover);
  --color-action-ghost-pressed:              var(--action-ghost-pressed);
  --color-action-danger-default:             var(--action-danger-default);
  --color-action-danger-hover:               var(--action-danger-hover);
  --color-action-danger-pressed:             var(--action-danger-pressed);
  --color-action-disabled-bg:                var(--action-disabled-bg);
  --color-action-disabled-fg:                var(--action-disabled-fg);
  --color-accent-default:                    var(--accent-default);
  --color-accent-hover:                      var(--accent-hover);
  --color-accent-foreground:                 var(--accent-foreground);
  --color-accent-soft:                       var(--accent-soft);
  --color-status-success-default:            var(--status-success-default);
  --color-status-success-soft:               var(--status-success-soft);
  --color-status-warning-default:            var(--status-warning-default);
  --color-status-warning-soft:               var(--status-warning-soft);
  --color-status-danger-default:             var(--status-danger-default);
  --color-status-danger-soft:                var(--status-danger-soft);
  --color-status-info-default:               var(--status-info-default);
  --color-status-info-soft:                  var(--status-info-soft);
  --color-icon-primary:                      var(--icon-primary);
  --color-icon-muted:                        var(--icon-muted);
  --color-icon-accent:                       var(--icon-accent);
  --color-icon-on-action:                    var(--icon-on-action);
  --color-overlay-scrim:                     var(--overlay-scrim);
  --color-accent-on-action:                  var(--accent-on-action);
  --color-decor-sage:                        var(--decor-sage);
  --color-decor-champagne:                   var(--decor-champagne);
  --color-shadow-card-hover:                 var(--shadow-card-hover);
  --color-text-warning:                      var(--text-warning);
  --color-text-on-inverse:                   var(--text-on-inverse);
  --color-surface-inverse:                   var(--surface-inverse);
  --color-border-control:                    var(--border-control);
  --color-border-control-hover:              var(--border-control-hover);
  --color-accent-on-inverse:                 var(--accent-on-inverse);
  --color-status-success-strong:             var(--status-success-strong);
  --color-status-warning-strong:             var(--status-warning-strong);
  --color-status-danger-strong:              var(--status-danger-strong);
  --color-text-on-success:                   var(--text-on-success);
  --color-text-on-warning:                   var(--text-on-warning);
  --color-text-on-danger:                    var(--text-on-danger);
}

/* أسماء الحركة كما توثّقها صفحة «04 — Utilities & Accessibility»:
   var(--motion-duration-*) و var(--motion-easing-*)                        */
:root {
  --motion-duration-instant: var(--duration-instant);
  --motion-duration-fast:    var(--duration-fast);
  --motion-duration-base:    var(--duration-base);
  --motion-duration-slow:    var(--duration-slow);
  --motion-duration-xslow:   var(--duration-xslow);
  --motion-easing-standard:  var(--easing-standard);
  --motion-easing-enter:     var(--easing-enter);
  --motion-easing-exit:      var(--easing-exit);
}