/* ==========================================================================
   B2B Design System - Tokens
   الملف المرجعي لجميع القيم المعيارية في واجهة المتجر
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     A1. Typography Scale — 4 أحجام فقط
     ------------------------------------------------------------------ */
  --fs-xs: 12px;     /* Helper text, meta, captions */
  --fs-sm: 14px;     /* Labels, body-small, table cells */
  --fs-md: 16px;     /* Body text, subtitles, section titles */
  --fs-lg: 20px;     /* Page titles */

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

  --lh-tight:   1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;

  --font-family: 'Cairo', sans-serif;

  /* ------------------------------------------------------------------
     A2. Spacing Scale — سُلّم واحد فقط
     ------------------------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* ------------------------------------------------------------------
     A3. Sizing
     ------------------------------------------------------------------ */
  /* Input / Button Heights */
  --input-height:   40px;
  --btn-height-sm:  32px;
  --btn-height-md:  40px;
  --btn-height-lg:  48px;

  /* Border Radius */
  --radius:      8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 50px;

  /* Modal Widths */
  --modal-sm: 380px;
  --modal-md: 520px;
  --modal-lg: 720px;

  /* Table Row Height */
  --row-height: 48px;

  /* ------------------------------------------------------------------
     Shadows
     ------------------------------------------------------------------ */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 20px 48px rgba(0, 0, 0, 0.12);
  --shadow-xl-premium: 0 20px 60px rgba(0, 0, 0, 0.1); /* للمودالات والبطاقات الفاخرة */
  --shadow-glow: 0 8px 30px rgba(var(--bs-primary-rgb, 30, 64, 175), 0.15);

  /* ------------------------------------------------------------------
     Premium & Auth Specific
     ------------------------------------------------------------------ */
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  
  --bg-auth-gradient: linear-gradient(160deg, #f0f5ff 0%, #ffffff 40%, #fffbeb 100%);
  --bg-auth-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  --bg-card-premium: linear-gradient(90deg, var(--bs-primary, #1e40af), var(--accent-color, #d97706), var(--bs-primary, #1e40af));


  /* ------------------------------------------------------------------
     Semantic Colors (تُكمّل متغيرات الثيم الديناميكية)
     ------------------------------------------------------------------ */
  --text-primary:   #1a1a1a;
  --text-secondary: #666666;
  --text-muted:     #999999;
  --text-helper:    #aaaaaa;

  --border-color:   #e5e5e5;
  --border-light:   #f0f0f0;
  --border-focus:   var(--bs-primary, #3b82f6);

  --bg-page:   #f5f5f5;
  --bg-card:   #ffffff;
  --bg-input:  #f8fafc;
  --bg-hover:  #f9fafb;

  --color-danger:   #dc2626;
  --color-danger-bg: #fef2f2;
  --color-success:  #16a34a;
  --color-success-bg: #f0fdf4;
  --color-warning:  #f59e0b;
  --color-warning-bg: #fffbeb;
  --color-info:     #3b82f6;
  --color-info-bg:  #eff6ff;

  /* ------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------ */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global body font */
body {
  font-family: var(--font-family);
  color: var(--text-primary);
  line-height: var(--lh-normal);
}

/* ------------------------------------------------------------------
   Responsive Typography (تصغير الخطوط تلقائياً في شاشات الهاتف)
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  :root {
    --fs-xs: 11px;     /* أصغر درجة للموبايل */
    --fs-sm: 13px;     /* مقاس أصغر بكسل واحد عن الديسكتوب */
    --fs-md: 15px;     /* المتن أو النص العادي */
    --fs-lg: 18px;     /* العناوين الكبيرة */
    
    /* تقليص المسافات الكبيرة لتوفير مساحة شاشة في الموبايل */
    --sp-6: 24px;      /* تقلص من 32px */
    --sp-5: 20px;      /* تقلص من 24px */
  }
}