/* ==========================================================================
   tokens.css — متغيرات التصميم (Design Tokens)
   شركة السرعة المطلقة | Absolute Speed Company
   المصدر: DESIGN_SYSTEM.md — قيمة واحدة لكل دور دلالي.
   متجر عربي RTL — الأرقام لاتينية، العملة ر.س.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------------
     الألوان (Colors)
     لوحة الهوية: عنابي/خمري داكن + أسود قريب، مع أحمر فاتح للتمييز،
     على أسطح بيضاء/رمادية فاتحة. الأخضر للأكشن (واتساب) والنجاح.
     ------------------------------------------------------------------------ */

  /* الألوان الأساسية (Brand) */
  --color-primary: #7D1822;
  /* العنابي الأساسي — أزرار، شارات، عناوين */
  --color-primary-deep: #840201;
  /* عنابي أعمق — زر البحث، حالات مضغوطة */
  --color-primary-darkest: #5C0D0D;
  /* أغمق — تحويم/ضغط (hover/pressed) */
  --color-accent: #C2010D;
  /* أحمر فاتح — الشعار، نسبة الخصم، تمييز السعر */
  --color-price: #5A0D18;
  /* نبيذي غامق — رقم السعر الكبير وسعر القسط على بطاقة المنتج */
  --color-gold: #D4A017;
  /* ذهبي — خط تحت الشعار في التذييل ولمسات ذهبية */
  --color-dark: #0B0B0D;
  /* أسود قريب — الشريط العلوي، الأزرار الداكنة */
  --color-gradient-end: #4A0E14;
  /* عنابي غامق — نهاية تدرّج الهوية، روابط "عرض الكل" */

  /* تدرّج الهوية (Brand gradient) — الشريط العلوي والتذييل والأقسام الداكنة */
  --gradient-brand: linear-gradient(90deg, #0B0B0D 29.81%, var(--color-gradient-end) 100%);
  --gradient-booking-header: linear-gradient(142deg, var(--color-dark) 0%, var(--color-price) 100%);
  /* رأس نافذة حجز الخدمة (ServicesBookingModal) — قيمة فيجما الحرفية */

  /* الأسطح والخلفيات (Surfaces & backgrounds) */
  --color-surface-dark: #1E0C0F;
  /* بطاقات/بانرات داكنة، جسم التذييل */
  --color-bg: #FFFFFF;
  /* خلفية الصفحة */
  --color-bg-alt: #F8F9FB;
  /* أشرطة الأقسام، حقول الفلاتر */
  --color-surface: #FFFFFF;
  /* أسطح البطاقات والنوافذ المنبثقة */

  /* الحدود (Borders) */
  --color-border: #E4E6EB;
  /* حدود الحقول والبطاقات والفواصل */
  --color-border-strong: #C4C5C4;
  /* حدود أوضح */
  --color-divider: #EDEDED;
  /* فاصل رصاصي فاتح بين عناصر (إحصائيات) */

  /* النصوص (Text) */
  --color-text: #1A1A1A;
  /* العناوين والنص الأساسي على الفاتح */
  --color-text-muted: #6B7280;
  /* التسميات الباهتة، النصوص المساعدة */
  --color-text-faint: #999999;
  /* تسميات باهتة جدًا (بطاقة السعر، عدّاد المعرض) — قيمة فيجما الحرفية */
  --color-text-secondary: #444444;
  /* نص ثانوي أغمق من الباهت (حالة التوفّر) — قيمة فيجما الحرفية */
  --color-heading-alt: #242424;
  /* لون بديل لعناوين بعض الأقسام (منتجات ذات صلة) — قيمة فيجما الحرفية */
  --color-text-invert: #FFFFFF;
  --color-text-invert-muted: rgba(255, 255, 255, 0.65);
  /* نص خافت على خلفية داكنة — تسمية "طلب خدمة"، وحدة السعر في نافذة الحجز */
  /* النص على الخلفيات الداكنة */

  /* الحالات (Status) */
  --color-whatsapp: #25D366;
  /* زر واتساب العائم وأزرار "تواصل عبر الواتساب" */
  --color-success: #18B26B;
  /* شارة التوفير "ريال وفرت" والنجاح */
  --color-star: #F59E0B;
  /* نجوم التقييم (ذهبي) */
  --color-error: #C2010D;
  /* الأخطاء وعلامة الحقل المطلوب * */

  /* الطبقة المعتمة فوق النوافذ المنبثقة (Modal scrim) */
  --overlay-scrim: rgba(0, 0, 0, 0.5);

  /* Glass / translucent overlays — حقول زجاجية على الأبطال الداكنة */
  --color-glass-fill: rgba(255, 255, 255, 0.06);
  --color-glass-border: rgba(255, 255, 255, 0.20);
  /* لوح زجاجي معتم — بطاقة تسجيل الدخول/التسجيل فوق خلفية سينمائية */
  --color-glass-panel: rgba(19, 19, 19, 0.65);
  --color-glass-panel-border: rgba(255, 255, 255, 0.10);
  /* حدّ زجاجي متدرّج — حدّ فاتح مرئي على كل الحواف مع لمعة أعلى-يسار (بطاقات البطل).
     الأرضية (floor) تبقى مرئية أسفل-يمين ولا تتلاشى تمامًا. */
  --gradient-glass-border: linear-gradient(135deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.16) 45%,
      rgba(255, 255, 255, 0.07) 100%);


  /* ------------------------------------------------------------------------
     الخطوط (Typography)
     خط عربي هندسي (Tajawal/Cairo). العناوين ثقيلة والنص عادي.
     الأرقام تبقى لاتينية.
     ------------------------------------------------------------------------ */

  /* عائلة الخط (Font family) */
  --font-base: "DIN Next LT Arabic", sans-serif;
  /* خط العناوين البطلة (Zain) — عناوين الأبطال فقط */
  --font-display: "Zain Mob Long800", "DIN Next LT Arabic", sans-serif;

  /* مقاسات الخط — من الأصغر إلى الأكبر (Font sizes) */
  --fs-2xs: 12px;
  /* شارات، نص مساعد، حقوق التذييل */
  --fs-xs: 14px;
  /* نص صغير، خلايا الجداول، الشريط العلوي */
  --fs-base: 16px;
  /* النص الأساسي، عناصر القائمة، الحقول */
  --fs-md: 18px;
  /* عناوين البطاقات، أسماء المنتجات */
  --fs-lg: 20px;
  /* عناوين فرعية، تسميات الملخص */
  --fs-xl: 22px;
  /* عناوين فرعية أكبر */
  --fs-section-cta: 24px;
  /* روابط "عرض الكل" أعلى الأقسام */
  --fs-2xl: 28px;
  /* تمييز السعر، أرقام الإحصائيات */
  --fs-3xl: 32px;
  /* عناوين الأقسام */
  --fs-title-md: 36px;
  /* عناوين أقسام متوسطة على سطح المكتب (منتجات ذات صلة) — قيمة فيجما الحرفية */
  --fs-4xl: 40px;
  /* عناوين الأقسام الكبيرة */
  --fs-title-lg: 44px;
  /* عنوان "اختر الخدمة المناسبة" (صفحة الخدمات) — قيمة فيجما الحرفية */
  --fs-5xl: 48px;
  /* عناوين أقسام أكبر (لماذا يثق بنا) */
  --fs-hero: 56px;
  /* عناوين البطل، الإحصائيات الكبيرة، عناوين النوافذ */

  /* أوزان الخط (Font weights) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* ارتفاعات السطر (Line heights) */
  --lh-tight: 1.2;
  /* العناوين */
  --lh-base: 1.6;
  /* النص العربي الأساسي */
  --lh-display: 1.1;
  /* الأرقام الكبيرة */


  /* ------------------------------------------------------------------------
     المسافات (Spacing) — أساس 8px مع أنصاف 4px
     التسمية بقيمة البكسل (--space-4 … --space-64).
     ------------------------------------------------------------------------ */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  /* حشوة رأس نافذة حجز الخدمة — قيمة فيجما الحرفية */
  --space-32: 32px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  /* ارتفاع حقول/أزرار نماذج الحساب (تسجيل/اشتراك/رمز) — من فيجما */
  --space-56: 56px;
  --space-58: 58px;
  /* ارتفاع عناصر شريط الشراء (أزرار المفضلة/المشاركة، أضف للسلة، صندوق الكمية) — من فيجما */
  --space-64: 64px;
  /* صورة منتج داخل ملخّص الطلب — من فيجما (127×128) */
  --space-128: 128px;

  /* مسافات تخطيطية (Layout spacing) */
  --section-y: 32px;
  /* تباعد عمودي بين أقسام الصفحة — الجوال أولًا (يكبر على سطح المكتب أدناه) */
  --container-max: 1320px;
  /* أقصى عرض للمحتوى */
  --container-pad: 24px;
  /* حشوة جانبية للحاوية */


  /* ------------------------------------------------------------------------
     الحواف ونصف القطر (Border & Radius)
     ------------------------------------------------------------------------ */
  --radius-xs: 6px;
  /* شارات صغيرة جدًا (شامل الضريبة) */
  --radius-sm: 8px;
  /* الحقول، الشرائح الصغيرة، خلايا المواصفات */
  --radius-md: 12px;
  /* الأزرار، الشارات، شرائح الفلاتر */
  --radius-lg: 16px;
  /* البطاقات */
  --radius-card: 20px;
  /* بطاقات الأقسام في الصفحات الثابتة (SectionCard) — قيمة فيجما الحرفية */
  --radius-xl: 24px;
  /* النوافذ المنبثقة، البانرات الكبيرة، لوحة البحث */
  --radius-pill: 9999px;
  /* الحبوب، عدّاد الكمية، دوائر أرقام الخطوات */

  --border-width: 1px;
  /* الحد الافتراضي */
  --border-width-thick: 1.5px;
  /* حدّ أثقل قليلًا (صندوق عدّاد الكمية في شريط الشراء) — من فيجما */
  --border-width-active: 2px;
  /* الحالة المختارة/النشطة */


  /* ------------------------------------------------------------------------
     الظلال (Shadows)
     ------------------------------------------------------------------------ */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  /* البطاقة الساكنة */
  --shadow-card-soft: 0 2px 16px rgba(0, 0, 0, 0.04);
  /* بطاقات ناعمة (خصائص الإطار/السعر) — من فيجما */
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.10);
  /* تحويم البطاقة */
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.25);
  /* النوافذ المنبثقة */
  --shadow-whatsapp: 0 6px 16px rgba(37, 211, 102, 0.4);
  /* زر واتساب العائم */
  --shadow-icon: 0 0 20px 0 rgba(0, 0, 0, 0.09);
  /* توهّج خفيف حول الأيقونات الدائرية */
  --shadow-card-glow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
  /* توهّج ناعم حول البطاقات (خطوات الطلب) */
  --shadow-cta: 0 2px 8px rgba(0, 0, 0, 0.15), 0 8px 32px rgba(11, 11, 13, 0.3);
  /* أزرار الإجراء الرئيسية (أضف للسلة / اشترِ الآن) — من فيجما */
  --shadow-gallery: 0 2px 20px rgba(0, 0, 0, 0.04), 0 8px 60px color-mix(in srgb, var(--color-gradient-end) 6%, transparent);
  /* إطار معرض المنتج — ظل مزدوج من فيجما (node 419-39099) */
  --shadow-icon-btn: 0 4px 16px rgba(0, 0, 0, 0.08);
  /* أزرار المفضلة/المشاركة الدائرية — من فيجما (node 419-39276) */
  --shadow-control: 0 2px 8px rgba(0, 0, 0, 0.04);
  /* صندوق عدّاد الكمية في شريط الشراء — من فيجما (node 419-39276) */


  /* طبقات التراكب (Z-index) */
  --z-dropdown: 100;
  /* قوائم منسدلة (مثل العلامات التجارية) */
  --z-drawer: 200;
  /* درج الجوال الجانبي */
  --z-modal: 300;
  /* النوافذ المنبثقة */
  --z-floating: 400;
  /* زر واتساب العائم */


  /* حركة وانتقالات (Motion & transitions) */
  --transition-modal: 0.25s ease;
  /* فتح/إغلاق النوافذ المنبثقة */


  /* ------------------------------------------------------------------------
     نقاط الكسر (Breakpoints) — للتوثيق والمرجع فقط
     ملاحظة: لا يمكن استخدام المتغيرات داخل @media، لذا تُكتب القيم صراحةً
     في الأطوار اللاحقة. التصميم موبايل-أولاً 320px → 1440px.
     ------------------------------------------------------------------------ */
  --bp-xs: 320px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

}

/* تباعد أقسام أوسع على سطح المكتب */
@media (min-width: 768px) {
  :root {
    --section-y: 45px;
  }
}