/* ============================================================
   tokens.css — نظام التصميم "الفخامة الداكنة السينمائية"
   الهوية: قوس جسر الموصل + الأحمر القرمزي على أسود عميق
   ------------------------------------------------------------
   كل ألوان الهوية تخرج من الثلاثة أدناه. لتغيير اللوحة كلياً
   لاحقاً غيّر هذه القيم فقط — لا شيء آخر في المشروع يحمل لوناً
   مكتوباً يدوياً.
   ============================================================ */

:root {
  /* ---------- ألوان الهوية الثابتة ---------- */
  --accent:        #D8312F;   /* أحمر قرمزي */
  --accent-bright: #FF5A56;   /* للتوهّج والتدرّجات وحالات المرور */
  --accent-deep:   #A11614;   /* للنص فوق الخلفيات الفاتحة */
  --whatsapp:    #25D366;

  /* ---------- الوضع الداكن (الأساسي — التصميم مبني عليه) ---------- */
  --ink:      #070708;
  --ink-2:    #0C0C0E;
  --surface:  #121215;
  --surface-2:#191920;
  --elev:     rgba(255,255,255,.035);

  --text:     #F4F1F0;
  --muted:    #9E9895;
  --faint:    #6B6664;
  --on-accent:  #FFFFFF;      /* أبيض فوق الأحمر — تباين 4.8:1 */

  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.055);
  /* الأحمر الأساسي يعطي 4.2:1 فقط على الأسود، لذا نستخدم
     الفاتح للنصوص الملوّنة — 6.6:1 */
  --accent-text: var(--accent-bright);

  --glass:        rgba(13,11,12,.62);
  --glass-border: rgba(255,255,255,.10);

  --stage: radial-gradient(110% 80% at 50% 0%, #2B1E20 0%, #171012 55%, #0B0809 100%);
  --grain-opacity: .05;
  --shadow: 0 30px 80px rgba(0,0,0,.6);
  --shadow-accent: 0 20px 60px rgba(216,49,47,.22);

  color-scheme: dark;
}

/* ---------- الوضع الفاتح (نسخة راقية دافئة من نفس الهوية) ---------- */
:root[data-theme="light"] {
  --ink:      #FBF9F9;
  --ink-2:    #F5F1F1;
  --surface:  #FFFFFF;
  --surface-2:#F1EBEB;
  --elev:     rgba(11,10,10,.03);

  --text:     #0E0D0D;
  --muted:    #5F5957;
  --faint:    #8D8785;
  --on-accent:  #FFFFFF;

  --line:      rgba(11,10,10,.12);
  --line-soft: rgba(11,10,10,.07);
  --accent-text: var(--accent-deep);   /* تباين 7.6:1 على الخلفية الفاتحة */

  --glass:        rgba(251,249,249,.72);
  --glass-border: rgba(11,10,10,.09);

  --stage: radial-gradient(110% 80% at 50% 0%, #FFFFFF 0%, #F6EDEC 55%, #ECDCDA 100%);
  --grain-opacity: .035;
  --shadow: 0 30px 70px rgba(22,14,14,.10);
  --shadow-accent: 0 20px 50px rgba(216,49,47,.26);

  color-scheme: light;
}

/* احتياطي لمن يعطّل JavaScript (السكربت المضمّن يضع data-theme دائماً) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ink: #FBF9F9; --ink-2: #F5F1F1; --surface: #FFFFFF; --surface-2: #F1EBEB;
    --text: #0E0D0D; --muted: #5F5957; --faint: #8D8785;
    --on-accent: #FFFFFF;
    --line: rgba(11,10,10,.12); --line-soft: rgba(11,10,10,.07);
    --accent-text: var(--accent-deep);
    --glass: rgba(251,249,249,.72); --glass-border: rgba(11,10,10,.09);
    --stage: radial-gradient(110% 80% at 50% 0%, #FFFFFF 0%, #F6EDEC 55%, #ECDCDA 100%);
    --shadow: 0 30px 70px rgba(22,14,14,.10);
    color-scheme: light;
  }
}

:root {
  /* ---------- الطباعة ----------
     العرض: Almarai (عربي) / Sora (لاتيني)
     المتن: IBM Plex Sans Arabic (عربي) / Sora (لاتيني) */
  --font-display-ar: 'Almarai', 'Segoe UI', Tahoma, sans-serif;
  --font-body-ar:    'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-display-en: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body-en:    'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-display: var(--font-display-ar);
  --font-body:    var(--font-body-ar);

  --fs-base: 1rem;
  --lh-base: 1.6;

  /* مقياس عرض — سينمائي لكن أهدأ (خُفّض ~20% عن النسخة الأولى) */
  --fs-hero:  clamp(1.9rem, .95rem + 3.4vw, 4rem);
  --fs-mega:  clamp(1.6rem, .95rem + 2.4vw, 2.9rem);
  --fs-4xl:   clamp(1.6rem, 1.05rem + 2.5vw, 2.85rem);
  --fs-3xl:   clamp(1.4rem, 1.05rem + 1.7vw, 2.2rem);
  --fs-2xl:   clamp(1.2rem, 1.05rem + .85vw, 1.6rem);
  --fs-xl:    clamp(1.08rem, 1rem + .42vw, 1.28rem);
  --fs-lg:    clamp(1rem, .96rem + .26vw, 1.1rem);
  --fs-md:    clamp(.9rem, .88rem + .14vw, .98rem);
  --fs-sm:    clamp(.82rem, .8rem + .1vw, .87rem);
  --fs-xs:    clamp(.72rem, .71rem + .08vw, .77rem);

  /* ---------- المسافات ---------- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem;
  --s-20:5rem; --s-24:6rem;
  --section-y: clamp(4.5rem, 2rem + 8vw, 10rem);

  --container: 1320px;
  --gutter: clamp(1.25rem, .5rem + 3vw, 4rem);
  --header-h: 78px;

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-2xl:40px; --r-pill:999px;

  --ease:     cubic-bezier(.33,.8,.35,1);    /* هبوط ناعم بلا ارتداد */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.65,.05,.36,1);
  --t-fast: 200ms;
  --t: 380ms;
  --t-slow: 820ms;

  --z-grain: 9000;
  --z-cursor: 9500;
  --z-loader: 9999;
  --z-header: 500;
  --z-drawer: 800;
  --z-fab: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t: 1ms; --t-slow: 1ms; }
}