/*
 * هون MOTORX - Design Tokens (CSS Custom Properties)
 * variables.css - الوان ومقاسات الـ Design
 */

/* DARK THEME (default) الـ theme الاساسي */
:root,
[data-theme="dark"] {
  /* Brand الوان البراند */
  --clr-brand:        #2196F3;
  --clr-brand-light:  #42A5F5;
  --clr-brand-dark:   #1565C0;
  --clr-brand-glow:   rgba(33, 150, 243, 0.35);

  /* Backgrounds الخلفيات */
  --clr-bg-base:      #0A0F1E;
  --clr-bg-surface:   #0F1628;
  --clr-bg-card:      #111827;
  --clr-bg-card-hover:#162033;
  --clr-bg-input:     #1A2235;
  --clr-bg-sidebar:   #080D1A;
  --clr-bg-overlay:   rgba(0, 0, 0, 0.75);

  /* Text الخطوط */
  --clr-text-primary:   #F0F4FF;
  --clr-text-secondary: #8B9CC8;
  --clr-text-muted:     #4A5568;
  --clr-text-inverse:   #0A0F1E;
  --clr-text-on-brand:  #FFFFFF;

  /* Borders الحدود */
  --clr-border:         rgba(33, 150, 243, 0.15);
  --clr-border-strong:  rgba(33, 150, 243, 0.35);
  --clr-border-subtle:  rgba(255, 255, 255, 0.05);

  /* Status الوان الحالة */
  --clr-success:        #10B981;
  --clr-success-bg:     rgba(16, 185, 129, 0.12);
  --clr-warning:        #F59E0B;
  --clr-warning-bg:     rgba(245, 158, 11, 0.12);
  --clr-danger:         #EF4444;
  --clr-danger-bg:      rgba(239, 68, 68, 0.12);
  --clr-info:           #06B6D4;
  --clr-info-bg:        rgba(6, 182, 212, 0.12);

  /* هون AI Badges */
  --clr-good-deal:        #10B981;
  --clr-good-deal-bg:     rgba(16, 185, 129, 0.15);
  --clr-fair-price:       #F59E0B;
  --clr-fair-price-bg:    rgba(245, 158, 11, 0.15);
  --clr-overpriced:       #EF4444;
  --clr-overpriced-bg:    rgba(239, 68, 68, 0.15);

  /* Glassmorphism الـ glass effect */
  --glass-bg:             rgba(15, 22, 40, 0.70);
  --glass-border:         rgba(33, 150, 243, 0.18);
  --glass-blur:           blur(20px);
  --glass-shadow:         0 8px 32px rgba(0, 0, 0, 0.40);

  /* هون Navbar */
  --navbar-bg:            rgba(8, 13, 26, 0.92);
  --navbar-border:        rgba(33, 150, 243, 0.12);
  --navbar-height:        68px;

  /* هون Shadows */
  --shadow-sm:            0 2px 8px  rgba(0, 0, 0, 0.30);
  --shadow-md:            0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg:            0 8px 32px rgba(0, 0, 0, 0.50);
  --shadow-xl:            0 16px 48px rgba(0, 0, 0, 0.60);
  --shadow-brand:         var(--shadow-md);
  --shadow-brand-strong:  var(--shadow-lg);

  /* هون Scrollbar */
  --scrollbar-track:      #0F1628;
  --scrollbar-thumb:      #1E3A5F;
  --scrollbar-thumb-hover:#2196F3;

  /* هون Logo */
  --logo-text-color:      #FFFFFF;
  --logo-x-color:         #2196F3;

  /* Hero background صورة الهيرو */
  --hero-bg-image:        url('../images/hero.webp');
  --hero-bg-filter:       none;
  --hero-bg-overlay:      linear-gradient(
                            to bottom,
                            rgba(10, 15, 30, 0.62) 0%,
                            rgba(10, 15, 30, 0.78) 65%,
                            var(--clr-bg-base) 100%
                          );
  --hero-bg-overlay-mobile: linear-gradient(
                            to bottom,
                            rgba(10, 15, 30, 0.72) 0%,
                            rgba(10, 15, 30, 0.88) 65%,
                            var(--clr-bg-base) 100%
                          );
  --hero-bg-grid:         linear-gradient(rgba(33, 150, 243, 0.04) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(33, 150, 243, 0.04) 1px, transparent 1px);
  --hero-bg-glow:         none;
}

/* LIGHT THEME الـ theme الفاتح */
[data-theme="light"] {
  /* Brand - نفس الاشي */
  --clr-brand:        #1976D2;
  --clr-brand-light:  #42A5F5;
  --clr-brand-dark:   #0D47A1;
  --clr-brand-glow:   rgba(25, 118, 210, 0.20);

  /* Backgrounds الخلفيات */
  --clr-bg-base:      #F4F7FF;
  --clr-bg-surface:   #FFFFFF;
  --clr-bg-card:      #FFFFFF;
  --clr-bg-card-hover:#EEF4FF;
  --clr-bg-input:     #F0F4FF;
  --clr-bg-sidebar:   #1A2740;
  --clr-bg-overlay:   rgba(0, 0, 0, 0.55);

  /* هون Text */
  --clr-text-primary:   #0F172A;
  --clr-text-secondary: #475569;
  --clr-text-muted:     #94A3B8;
  --clr-text-inverse:   #FFFFFF;
  --clr-text-on-brand:  #FFFFFF;

  /* هون Borders */
  --clr-border:         rgba(0, 0, 0, 0.08);
  --clr-border-strong:  rgba(25, 118, 210, 0.30);
  --clr-border-subtle:  rgba(0, 0, 0, 0.04);

  /* هون Status */
  --clr-success:        #059669;
  --clr-success-bg:     rgba(5, 150, 105, 0.10);
  --clr-warning:        #D97706;
  --clr-warning-bg:     rgba(217, 119, 6, 0.10);
  --clr-danger:         #DC2626;
  --clr-danger-bg:      rgba(220, 38, 38, 0.10);
  --clr-info:           #0891B2;
  --clr-info-bg:        rgba(8, 145, 178, 0.10);

  /* هون AI Badges */
  --clr-good-deal:        #059669;
  --clr-good-deal-bg:     rgba(5, 150, 105, 0.12);
  --clr-fair-price:       #D97706;
  --clr-fair-price-bg:    rgba(217, 119, 6, 0.12);
  --clr-overpriced:       #DC2626;
  --clr-overpriced-bg:    rgba(220, 38, 38, 0.12);

  /* هون Glassmorphism */
  --glass-bg:             rgba(255, 255, 255, 0.75);
  --glass-border:         rgba(25, 118, 210, 0.15);
  --glass-blur:           blur(20px);
  --glass-shadow:         0 8px 32px rgba(0, 0, 0, 0.12);

  /* هون Navbar */
  --navbar-bg:            rgba(255, 255, 255, 0.95);
  --navbar-border:        rgba(0, 0, 0, 0.08);
  --navbar-height:        68px;

  /* هون Shadows */
  --shadow-sm:            0 2px 8px  rgba(0, 0, 0, 0.06);
  --shadow-md:            0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:            0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-xl:            0 16px 48px rgba(0, 0, 0, 0.18);
  --shadow-brand:         var(--shadow-md);
  --shadow-brand-strong:  var(--shadow-lg);

  /* هون Scrollbar */
  --scrollbar-track:      #F0F4FF;
  --scrollbar-thumb:      #CBD5E1;
  --scrollbar-thumb-hover:#1976D2;

  /* هون Logo */
  --logo-text-color:      #0F172A;
  --logo-x-color:         #1976D2;

  /* هون Hero background */
  --hero-bg-filter:       brightness(0.85) contrast(1.1);
  --hero-bg-overlay:      linear-gradient(
                            to bottom,
                            rgba(15, 20, 60, 0.62) 0%,
                            rgba(15, 20, 60, 0.78) 65%,
                            var(--clr-bg-base) 100%
                          );
  --hero-bg-overlay-mobile: linear-gradient(
                            to bottom,
                            rgba(15, 20, 60, 0.72) 0%,
                            rgba(15, 20, 60, 0.88) 65%,
                            var(--clr-bg-base) 100%
                          );
  --hero-bg-grid:         linear-gradient(rgba(25, 118, 210, 0.06) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(25, 118, 210, 0.06) 1px, transparent 1px);
}

/* SPACING المساحات */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* TYPOGRAPHY الخطوط */
  --font-sans:     'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-arabic:   'Cairo', 'Tajawal', 'Arial', sans-serif;

  --text-xs:   0.75rem;    /* هون 12px */
  --text-sm:   0.875rem;   /* هون 14px */
  --text-base: 1rem;       /* هون 16px */
  --text-lg:   1.125rem;   /* هون 18px */
  --text-xl:   1.25rem;    /* هون 20px */
  --text-2xl:  1.5rem;     /* هون 24px */
  --text-3xl:  1.875rem;   /* هون 30px */
  --text-4xl:  2.25rem;    /* هون 36px */
  --text-5xl:  3rem;       /* هون 48px */
  --text-6xl:  3.75rem;    /* هون 60px */

  --font-thin:       100;
  --font-light:      300;
  --font-normal:     400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* هون BORDER RADIUS */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* هون TRANSITIONS */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-spring:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* هون Z-INDEX */
  --z-below:    -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    9999;  /* matches hardcoded z-index on .modal-overlay in global.css */
  --z-navbar:   600;
  --z-toast:    99999; /* above modals */

  /* هون LAYOUT */
  --container-max:    1280px;
  --container-pad:    clamp(16px, 4vw, 48px);
  --sidebar-width:    260px;
  --card-min-w:       280px;
}

/*
 * هون MOTORX - MOBILE VARIABLE OVERRIDES (max-width: 768px)
 * بنصغر الـ navbar height والـ padding عشان الـ mobile
 */
@media (max-width: 768px) {
  :root {
    --navbar-height:   60px;
    --container-pad:   16px;
    --card-min-w:      100%;
  }
}