/* ==========================================================================
   كاشف — رموز التصميم (المصدر الوحيد للحقيقة البصرية)

   مبنية على توصيات ui-ux-pro-max: نمط «AI-Native UI» بإطار بصري خفيف،
   ورموز لونية دلالية بدل قيم مباشرة، ومقياسي طباعة ومسافات منتظمين.
   ألوان العلامة تبقى ألوان إرتكاز — الرموز تنظّم استعمالها لا تستبدله.
   ========================================================================== */

:root {
  /* ── اللون: رموز دلالية، لا قيم خام في المكوّنات ── */
  --color-primary:        #5d4d9e;
  --color-primary-strong: #312265;
  --color-primary-soft:   #f3f0fb;
  --color-primary-faint:  #faf8ff;
  --color-on-primary:     #fdfcff;
  --color-accent:         #7a3fd1;

  --color-background:     #f7f6fb;
  --color-surface:        #fdfcff;   /* أبيض بارد لا خالص */
  --color-surface-muted:  #f7f5fc;
  --color-foreground:     #1c1a2e;
  --color-muted:          #5f5b78;
  --color-subtle:         #6b6784;
  --color-border:         #e4e1ef;
  --color-border-strong:  #cfc9e4;

  --color-success:        #067647;
  --color-warning:        #a85204;
  --color-destructive:    #c92a1e;
  --color-info:           #175cd3;
  --color-ring:           var(--color-accent);
  --color-whatsapp:       #25d366;
  --color-telegram:       #229ed9;

  /* ── الطباعة: مقياس واحد لكل الصفحات ── */
  --font-heading: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Tajawal', 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  --text-xs:   0.75rem;   /* 12 — شارات وتسميات دقيقة */
  --text-sm:   0.875rem;  /* 14 — نص ثانوي */
  --text-base: 1rem;      /* 16 — المتن، الحد الأدنى على الجوال */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.5rem;    /* 40 */
  --text-4xl:  3.25rem;   /* 52 — عرض قصير وعريض، لا عنوان يلتفّ خمسة أسطر */

  --leading-display: 1.1;  /* العناوين الكبيرة تُشدّ، لا تُترك على إيقاع المتن */
  --leading-tight: 1.25;
  --leading-snug:  1.4;
  --leading-body:  1.7;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ── المسافات: سلّم من 4 بكسل ── */
  --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;

  /* ── الاستدارة والارتفاع ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-full: 999px;

  --elevation-1: 0 1px 2px rgba(49, 34, 101, .05);
  --elevation-2: 0 1px 2px rgba(49, 34, 101, .06), 0 8px 24px rgba(49, 34, 101, .06);
  --elevation-3: 0 4px 12px rgba(49, 34, 101, .08), 0 24px 48px rgba(49, 34, 101, .10);

  /* ── الحركة: الدخول أبطأ من الخروج، وبمنحنيات لا خطّية ── */
  --motion-fast:  150ms;
  --motion-base:  220ms;
  --motion-slow:  320ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in:  cubic-bezier(.55, 0, 1, .45);

  /* ── الأيقونات: مقاسات محدودة، وسمك خط واحد ── */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 1.75;

  /* ── التخطيط ── */
  --container: 1120px;
  --container-narrow: 760px;
  --measure: 68ch;        /* مقاس السطر المقروء */
  --measure-tight: 22ch;  /* عرض العنوان: قصير وعريض */
  --tap-min: 44px;

  /* ── الطبقات: سلّم معلن بدل أرقام عشوائية ── */
  --z-base: 0;
  --z-sticky: 40;
  --z-dropdown: 60;
  --z-float: 80;
  --z-modal: 100;
}

/* الوضع الداكن: نغمات أفتح لا ألوان معكوسة، وتباين يُختبر مستقلاً */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-primary:        #9b8ad6;
    --color-primary-strong: #b9a9ee;
    --color-primary-soft:   #241d3d;
    --color-primary-faint:  #1d1830;
    --color-accent:         #a97bec;

    --color-background:     #14111f;
    --color-surface:        #1c182b;
    --color-surface-muted:  #221d34;
    --color-foreground:     #eeecf6;
    --color-muted:          #b3aecb;
    --color-subtle:         #9a95b5;
    --color-border:         #322b48;
    --color-border-strong:  #453b63;

    --color-success:     #47cd89;
    --color-warning:     #fdb022;
    --color-destructive: #f97066;
    --color-info:        #84adff;

    --elevation-1: 0 1px 2px rgba(0, 0, 0, .25);
    --elevation-2: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --elevation-3: 0 4px 12px rgba(0, 0, 0, .35), 0 24px 48px rgba(0, 0, 0, .3);
  }
}

/* ── جسور توافق: الأسماء القديمة تشير إلى الرموز الجديدة ──
   تبقى حتى تُحدَّث كل الأنماط، فلا ينكسر شيء أثناء الانتقال. */
:root {
  --brand:         var(--color-primary);
  --brand-deep:    var(--color-primary-strong);
  --brand-accent:  var(--color-accent);
  --brand-soft:    var(--color-primary-soft);
  --brand-softer:  var(--color-primary-faint);
  --bg:            var(--color-background);
  --surface:       var(--color-surface);
  --surface-2:     var(--color-surface-muted);
  --border:        var(--color-border);
  --border-strong: var(--color-border-strong);
  --text:          var(--color-foreground);
  --text-muted:    var(--color-muted);
  --text-faint:    var(--color-subtle);
  --danger:        var(--color-destructive);
  --warning:       var(--color-warning);
  --success:       var(--color-success);
  --info:          var(--color-info);
  --whatsapp:      var(--color-whatsapp);
  --radius:        var(--radius-md);
  --radius-lg:     var(--radius-lg);
  --shadow:        var(--elevation-2);
  --shadow-lg:     var(--elevation-3);
  --maxw:          var(--container);
  --font-head:     var(--font-heading);
}