/* ============================================================
   مجموعة العييري التجارية · العييري ريزيدنس
   tokens.css — المصدر الوحيد للهوية البصرية
   ------------------------------------------------------------
   ⚠️  لا يُكتب أي لون أو مقاس بالأرقام في أي ملف آخر.
       كل شيء يُستدعى من هنا. تغيير هنا = تغيير في السبع أنظمة.

   الألوان مستخرجة فعليًا من:
     · شعار المجموعة (السداسي)      → الأحمر والأزرق
     · شعار AL EAIRY RESIDENCE       → الذهبي
     · صور الوحدات والاستقبال        → المحايدات الدافية
   ============================================================ */

:root {

  /* ══════════════════════════════════════════════════════════
     ١. ألوان الشعار — كما هي، لا تُستخدم كألوان واجهة
     ══════════════════════════════════════════════════════════ */
  --logo-red:   #ef5050;   /* السداسي — الشعار فقط */
  --logo-blue:  #3e579e;   /* حرف A  — الشعار فقط */
  --logo-gold:  #a88b4e;   /* ريزيدنس المسطّح */

  /* التدرّج المعدني — للطباعة والشعار الكبير فقط، لا للواجهات */
  --logo-gold-metal: linear-gradient(135deg,#705830 0%,#b8a070 38%,#8d7340 62%,#c6b285 100%);


  /* ══════════════════════════════════════════════════════════
     ٢. الذهبي — وجه الضيف (ريزيدنس)
     ══════════════════════════════════════════════════════════ */
  --gold-50:   #faf6ed;
  --gold-100:  #f2e9d5;
  --gold-200:  #e5d5b0;
  --gold-300:  #d3bc86;
  --gold-400:  #bfa163;
  --gold-500:  #a88b4e;   /* الأساسي */
  --gold-600:  #8d7340;   /* نص ذهبي على أبيض — تباين 4.5:1 ✓ */
  --gold-700:  #705830;   /* من ظل الشعار */
  --gold-800:  #574526;
  --gold-900:  #3d301a;


  /* ══════════════════════════════════════════════════════════
     ٣. الأزرق — وجه المشغّل (المجموعة)
     ══════════════════════════════════════════════════════════ */
  --blue-50:   #eef1f8;
  --blue-100:  #dae0ef;
  --blue-200:  #b5c0de;
  --blue-300:  #8698c6;
  --blue-400:  #5b71ae;
  --blue-500:  #3e579e;   /* أزرق الشعار — تباين 6.8:1 ✓ */
  --blue-600:  #334888;
  --blue-700:  #2a3b6e;
  --blue-800:  #223056;
  --blue-900:  #18213b;


  /* ══════════════════════════════════════════════════════════
     ٤. المحايدات — دافية، مأخوذة من رخام وخشب الوحدات
        (وليست slate الباردة المستخدمة حاليًا)
     ══════════════════════════════════════════════════════════ */
  --n-0:    #ffffff;
  --n-25:   #fbfaf8;
  --n-50:   #f7f5f1;
  --n-100:  #efede7;
  --n-200:  #e2ded6;
  --n-300:  #cbc5ba;
  --n-400:  #a8a196;
  --n-500:  #7a7367;   /* غُمِّق من ‎#837c71‎ ليجتاز 4.5:1 كنص تلميح */
  --n-600:  #645e55;
  --n-700:  #4a453e;
  --n-800:  #33302b;
  --n-900:  #1f1d1a;
  --n-950:  #141311;


  /* ══════════════════════════════════════════════════════════
     ٥. ألوان الدلالة — معناها ثابت في السبع أنظمة
        لاحظ: الخطر ‎#c33b36‎ أغمق من أحمر الشعار ‎#ef5050‎ عمدًا،
        حتى لا يختلط «هوية» بـ «خطأ».
     ══════════════════════════════════════════════════════════ */
  --ok:          #10814f;   --ok-bg:      #e8f5ee;   --ok-br:      #a8dcc0;
  --warn:        #98650a;   --warn-bg:    #fbf2df;   --warn-br:    #ecd292;   /* غُمِّق من ‎#b4780f‎ (كان 3.7:1) */
  --danger:      #c33b36;   --danger-bg:  #fbeae9;   --danger-br:  #f0b4b1;
  --info:        #2e5fa8;   --info-bg:    #e9eff9;   --info-br:    #b3c8e8;


  /* ══════════════════════════════════════════════════════════
     ٦. الأدوار — هنا يحصل التبديل بين الوجهين
        [data-face="guest"]    → ذهبي
        الافتراضي (المشغّل)     → أزرق
     ══════════════════════════════════════════════════════════ */
  --brand:         var(--blue-500);
  --brand-hover:   var(--blue-600);
  --brand-active:  var(--blue-700);
  --brand-soft:    var(--blue-50);
  --brand-border:  var(--blue-200);
  --brand-on:      #ffffff;      /* النص فوق اللون الأساسي */
  --brand-text:    var(--blue-600);

  --bg:            var(--n-50);
  --surface:       var(--n-0);
  --surface-2:     var(--n-100);
  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --text:          var(--n-800);
  --text-2:        var(--n-600);
  --text-3:        var(--n-500);
  --text-inv:      var(--n-0);


  /* ══════════════════════════════════════════════════════════
     ٧. الخطوط
     ══════════════════════════════════════════════════════════ */
  --font-ui:      'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;  /* اللوحات */
  --font-brand:   'Cairo','Segoe UI',Tahoma,sans-serif;                 /* الموقع */
  --font-display: 'Cormorant Garamond','Cairo',Georgia,serif;           /* عناوين الضيف */
  --font-num:     'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;

  /* سلّم الأحجام — لا حجم خارجه */
  --t-2xs:  0.6875rem;  /* 11 */
  --t-xs:   0.75rem;    /* 12 */
  --t-sm:   0.8125rem;  /* 13 — نص الجداول */
  --t-base: 0.875rem;   /* 14 — نص اللوحات */
  --t-md:   1rem;       /* 16 — نص الموقع */
  --t-lg:   1.125rem;   /* 18 */
  --t-xl:   1.375rem;   /* 22 */
  --t-2xl:  1.75rem;    /* 28 */
  --t-3xl:  2.25rem;    /* 36 */
  --t-4xl:  3rem;       /* 48 */

  --w-normal: 400;  --w-medium: 500;  --w-semi: 600;  --w-bold: 700;  --w-black: 800;

  /* العربي يحتاج سطرًا أعلى من اللاتيني */
  --lh-tight: 1.35;
  --lh-base:  1.7;
  --lh-loose: 1.9;


  /* ══════════════════════════════════════════════════════════
     ٨. المسافات — سلّم ٤ بكسل. لا مسافة خارجه.
     ══════════════════════════════════════════════════════════ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;


  /* ══════════════════════════════════════════════════════════
     ٩. الحواف والظلال — ٣ مستويات فقط
     ══════════════════════════════════════════════════════════ */
  --r-sm: 4px;  --r: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(31,29,26,.06), 0 1px 1px rgba(31,29,26,.04);
  --sh-2: 0 4px 12px rgba(31,29,26,.08), 0 1px 3px rgba(31,29,26,.05);
  --sh-3: 0 12px 32px rgba(31,29,26,.12), 0 2px 8px rgba(31,29,26,.06);

  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);

  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  .18s;
}


/* ══════════════════════════════════════════════════════════════
   وجه الضيف — الموقع والحجز والفواتير
   ══════════════════════════════════════════════════════════════ */
[data-face="guest"] {
  /* ⚠️ gold-500 لا يجتاز التباين مع نص أبيض (3.25:1).
     لذلك الزر الأساسي يستخدم gold-600 ‏(4.5:1 ✓). يبقى gold-500 لونًا زخرفيًا. */
  --brand:        var(--gold-600);
  --brand-hover:  var(--gold-700);
  --brand-active: var(--gold-800);
  --brand-soft:   var(--gold-50);
  --brand-border: var(--gold-200);
  --brand-text:   var(--gold-600);
  --brand-on:     #ffffff;

  --font-ui:      var(--font-brand);
  --bg:           var(--n-25);
}


/* ══════════════════════════════════════════════════════════════
   الوضع الليلي — للأنظمة التي تعمل بالليل (التشغيل والحجز)
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:            var(--n-950);
  --surface:       var(--n-900);
  --surface-2:     var(--n-800);
  --border:        #2e2b26;
  --border-strong: #423d36;
  --text:          #ece9e3;
  --text-2:        #b3ada3;
  --text-3:        #8c867c;
  --text-inv:      var(--n-900);

  --brand:         var(--blue-400);
  --brand-hover:   var(--blue-300);
  --brand-soft:    #1c2440;
  --brand-border:  #2c3a63;
  --brand-text:    var(--blue-300);

  --ok:      #34b678;  --ok-bg:     #10281e;  --ok-br:     #1d5540;
  --warn:    #d9a03a;  --warn-bg:   #2a2110;  --warn-br:   #5c4718;
  --danger:  #e2726c;  --danger-bg: #2c1616;  --danger-br: #6b2f2c;
  --info:    #6a9ae0;  --info-bg:   #131f33;  --info-br:   #2a4470;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 12px rgba(0,0,0,.45);
  --sh-3: 0 12px 32px rgba(0,0,0,.55);
}

[data-theme="dark"][data-face="guest"] {
  --brand:        var(--gold-400);
  --brand-hover:  var(--gold-300);
  --brand-soft:   #2a2114;
  --brand-border: #4a3a20;
  --brand-text:   var(--gold-300);
  --brand-on:     var(--n-950);
}


/* ══════════════════════════════════════════════════════════════
   قواعد عامة تخص العربي وRTL
   ══════════════════════════════════════════════════════════════ */

/* الأرقام في الجداول تتراص تحت بعضها */
.num, td.num, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  direction: ltr;
  text-align: end;
}

/* ⚠️ استخدم دائمًا الخصائص المنطقية بدل left/right
   صح:  margin-inline-start   ·   padding-inline-end   ·   border-inline-start
   غلط: margin-left           ·   padding-right        ·   border-left
   السبب: الصفحة تنقلب بين عربي وإنجليزي بلا كسر. */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}