/* =========================================================
   Sadaa Design System — Foundations v1.0
   صدى المتاجر — طبقة الأساسات المركزية

   المسؤولية:
   - المقاسات والمسافات والزوايا والخطوط والظلال والحركة
   - لا تحتوي هذه الطبقة على ألوان الهوية؛ الألوان مصدرها color-theme.php
   - لا تغيّر هذه النسخة أي مكوّن موجود تلقائياً؛ هي Tokens فقط
   ========================================================= */

:root {
  /* ---------------------------------------------------------
     Layout
     --------------------------------------------------------- */
  --sadaa-container-max: 1450px;
  --sadaa-content-max: 1430px;
  --sadaa-page-gutter: 16px;
  --sadaa-page-gutter-mobile: 12px;

  /* ---------------------------------------------------------
     Spacing scale
     مبنية على القيم الأكثر استخداماً فعلياً في الواجهة الحالية
     --------------------------------------------------------- */
  --sadaa-space-0: 0;
  --sadaa-space-1: 4px;
  --sadaa-space-2: 6px;
  --sadaa-space-3: 8px;
  --sadaa-space-4: 10px;
  --sadaa-space-5: 12px;
  --sadaa-space-6: 14px;
  --sadaa-space-7: 16px;
  --sadaa-space-8: 18px;
  --sadaa-space-9: 20px;
  --sadaa-space-10: 24px;
  --sadaa-space-11: 28px;
  --sadaa-space-12: 32px;
  --sadaa-space-13: 40px;
  --sadaa-space-14: 48px;
  --sadaa-space-15: 56px;
  --sadaa-space-16: 64px;

  /* ---------------------------------------------------------
     Radius
     المقاسات موحدة من الحقول الصغيرة حتى الحاويات الرئيسية
     --------------------------------------------------------- */
  --sadaa-radius-xs: 6px;
  --sadaa-radius-sm: 8px;
  --sadaa-radius-md: 10px;
  --sadaa-radius-lg: 12px;
  --sadaa-radius-xl: 16px;
  --sadaa-radius-2xl: 20px;
  --sadaa-radius-round: 50%;
  --sadaa-radius-pill: 999px;

  /* Semantic radius aliases */
  --sadaa-radius-field: var(--sadaa-radius-md);
  --sadaa-radius-button: var(--sadaa-radius-md);
  --sadaa-radius-card: var(--sadaa-radius-xl);
  --sadaa-radius-panel: var(--sadaa-radius-2xl);
  --sadaa-radius-badge: var(--sadaa-radius-pill);

  /* ---------------------------------------------------------
     Typography
     الخط نفسه يبقى تحت إدارة fonts-style.php
     --------------------------------------------------------- */
  --sadaa-font-family: var(--site-font-family, Tahoma, Arial, sans-serif);
  --sadaa-font-size-xs: 12px;
  --sadaa-font-size-sm: 13px;
  --sadaa-font-size-md: 14px;
  --sadaa-font-size-base: 16px;
  --sadaa-font-size-lg: 18px;
  --sadaa-font-size-xl: 20px;
  --sadaa-font-size-2xl: 22px;
  --sadaa-font-size-3xl: 24px;
  --sadaa-font-size-4xl: 28px;
  --sadaa-font-size-5xl: 32px;
  --sadaa-font-size-6xl: 36px;

  --sadaa-font-weight-regular: 400;
  --sadaa-font-weight-medium: 500;
  --sadaa-font-weight-semibold: 600;
  --sadaa-font-weight-bold: 700;
  --sadaa-font-weight-extrabold: 800;

  --sadaa-line-height-tight: 1.35;
  --sadaa-line-height-heading: 1.45;
  --sadaa-line-height-base: 1.7;
  --sadaa-line-height-relaxed: 1.85;

  /* ---------------------------------------------------------
     Controls
     تستوعب المقاسات المستخدمة حالياً قبل مرحلة التوحيد النهائية
     --------------------------------------------------------- */
  --sadaa-control-xs: 32px;
  --sadaa-control-sm: 36px;
  --sadaa-control-md: 40px;
  --sadaa-control-base: 44px;
  --sadaa-control-lg: 48px;
  --sadaa-control-xl: 52px;
  --sadaa-control-2xl: 56px;

  /* ---------------------------------------------------------
     Borders
     الألوان مرتبطة بمحرك الهوية المركزي
     --------------------------------------------------------- */
  --sadaa-border-width: 1px;
  --sadaa-border: var(--sadaa-border-width) solid var(--sadaa-line, #e5e7eb);
  --sadaa-border-strong: var(--sadaa-border-width) solid var(--sadaa-line-2, #d1d5db);

  /* ---------------------------------------------------------
     Shadows
     هادئة افتراضياً بما يتوافق مع توجه الواجهة الحالية
     --------------------------------------------------------- */
  --sadaa-shadow-none: none;
  --sadaa-shadow-xs: 0 1px 2px rgba(var(--sadaa-shadow-rgb, 17,24,39), .045);
  --sadaa-shadow-sm: 0 3px 10px rgba(var(--sadaa-shadow-rgb, 17,24,39), .055);
  --sadaa-shadow-md: 0 10px 28px rgba(var(--sadaa-shadow-rgb, 17,24,39), .075);
  --sadaa-shadow-lg: 0 18px 44px rgba(var(--sadaa-shadow-rgb, 17,24,39), .11);
  --sadaa-shadow-focus: 0 0 0 3px rgba(var(--sadaa-primary-rgb), .14);

  /* ---------------------------------------------------------
     Motion
     --------------------------------------------------------- */
  --sadaa-duration-fast: 120ms;
  --sadaa-duration-base: 200ms;
  --sadaa-duration-slow: 320ms;
  --sadaa-ease: ease;
  --sadaa-ease-out: cubic-bezier(.22, 1, .36, 1);
  --sadaa-transition-fast: var(--sadaa-duration-fast) var(--sadaa-ease);
  --sadaa-transition-base: var(--sadaa-duration-base) var(--sadaa-ease);
  --sadaa-transition-slow: var(--sadaa-duration-slow) var(--sadaa-ease-out);

  /* ---------------------------------------------------------
     Brand composition / elevation aliases
     الألوان نفسها تأتي من color-theme.php؛ هنا نحدد طريقة تركيبها فقط.
     --------------------------------------------------------- */
  --sadaa-brand-gradient: linear-gradient(135deg, var(--sadaa-primary) 0%, var(--sadaa-primary) 60%, var(--sadaa-accent) 100%);
  --sadaa-brand-gradient-soft: linear-gradient(135deg, rgba(var(--sadaa-primary-rgb), .10), rgba(var(--sadaa-accent-rgb), .08));
  --sadaa-shadow-card: var(--sadaa-shadow-sm);
  --sadaa-shadow-card-hover: var(--sadaa-shadow-md);
  --sadaa-shadow-panel: var(--sadaa-shadow-md);

  /* ---------------------------------------------------------
     Layering / z-index
     --------------------------------------------------------- */
  --sadaa-z-base: 1;
  --sadaa-z-sticky: 100;
  --sadaa-z-dropdown: 1000;
  --sadaa-z-overlay: 2000;
  --sadaa-z-modal: 3000;
  --sadaa-z-toast: 4000;
}

@media (max-width: 768px) {
  :root {
    --sadaa-page-gutter: var(--sadaa-page-gutter-mobile);
  }
}