/* ============================================
   نظام التصميم — مدير التوصيل
   Material 3 Inspired Design Tokens
   ============================================ */

:root {
  /* ── Primary Palette ── */
  --primary-50:  #EEF2FF;
  --primary-100: #E0E7FF;
  --primary-200: #C7D2FE;
  --primary-300: #A5B4FC;
  --primary-400: #818CF8;
  --primary-500: #6366F1;
  --primary-600: #4F46E5;
  --primary-700: #4338CA;
  --primary-800: #3730A3;
  --primary-900: #312E81;

  /* ── Success ── */
  --success-50:  #ECFDF5;
  --success-100: #D1FAE5;
  --success-200: #A7F3D0;
  --success-300: #6EE7B7;
  --success-400: #34D399;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;

  /* ── Warning ── */
  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-200: #FDE68A;
  --warning-300: #FCD34D;
  --warning-400: #FBBF24;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;

  /* ── Danger ── */
  --danger-50:  #FEF2F2;
  --danger-100: #FEE2E2;
  --danger-200: #FECACA;
  --danger-300: #FCA5A5;
  --danger-400: #F87171;
  --danger-500: #EF4444;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;

  /* ── Info ── */
  --info-50:  #EFF6FF;
  --info-100: #DBEAFE;
  --info-200: #BFDBFE;
  --info-300: #93C5FD;
  --info-400: #60A5FA;
  --info-500: #3B82F6;
  --info-600: #2563EB;

  /* ── Neutral ── */
  --neutral-50:  #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;

  /* ── Typography ── */
  --font-family: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.8125rem; /* 13px */
  --font-size-base: 0.9375rem; /* 15px */
  --font-size-md:   1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.875rem;  /* 30px */
  --font-size-4xl:  2.25rem;   /* 36px */

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

  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ── Spacing ── */
  --spacing-xs:  0.25rem;  /* 4px */
  --spacing-sm:  0.5rem;   /* 8px */
  --spacing-md:  0.75rem;  /* 12px */
  --spacing-base: 1rem;    /* 16px */
  --spacing-lg:  1.25rem;  /* 20px */
  --spacing-xl:  1.5rem;   /* 24px */
  --spacing-2xl: 2rem;     /* 32px */
  --spacing-3xl: 2.5rem;   /* 40px */
  --spacing-4xl: 3rem;     /* 48px */

  /* ── Border Radius ── */
  --radius-sm:   0.375rem; /* 6px */
  --radius-md:   0.5rem;   /* 8px */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-xl:   1rem;     /* 16px */
  --radius-2xl:  1.25rem;  /* 20px */
  --radius-full: 9999px;

  /* ── Shadows (Material Elevation) ── */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  /* ── Transitions ── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 72px;
  --header-height: 64px;
  --content-max-width: 1400px;
  --mobile-breakpoint: 768px;
  --tablet-breakpoint: 1024px;

  /* ── Z-Index Scale ── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}

/* ============================================
   Light Theme (Default)
   ============================================ */
[data-theme="light"], :root {
  --bg-primary:     #F8FAFC;
  --bg-secondary:   #FFFFFF;
  --bg-tertiary:    #F1F5F9;
  --bg-elevated:    #FFFFFF;
  --bg-hover:       #F1F5F9;
  --bg-active:      #E2E8F0;
  --bg-sidebar:     #FFFFFF;
  --bg-header:      rgba(255, 255, 255, 0.85);
  --bg-card:        #FFFFFF;
  --bg-modal:       #FFFFFF;
  --bg-input:       #FFFFFF;
  --bg-code:        #F1F5F9;

  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-tertiary:  #94A3B8;
  --text-inverse:   #FFFFFF;
  --text-link:      #4F46E5;

  --border-primary:   #E2E8F0;
  --border-secondary: #F1F5F9;
  --border-focus:     #4F46E5;

  --glass-bg:       rgba(255, 255, 255, 0.7);
  --glass-border:   rgba(255, 255, 255, 0.3);

  --scrollbar-track: #F1F5F9;
  --scrollbar-thumb: #CBD5E1;
  --scrollbar-thumb-hover: #94A3B8;

  --chart-grid:     #E2E8F0;
  --chart-text:     #64748B;
}

/* ============================================
   Dark Theme
   ============================================ */
[data-theme="dark"] {
  --bg-primary:     #0F172A;
  --bg-secondary:   #1E293B;
  --bg-tertiary:    #1E293B;
  --bg-elevated:    #1E293B;
  --bg-hover:       #334155;
  --bg-active:      #475569;
  --bg-sidebar:     #1E293B;
  --bg-header:      rgba(30, 41, 59, 0.9);
  --bg-card:        #1E293B;
  --bg-modal:       #1E293B;
  --bg-input:       #0F172A;
  --bg-code:        #0F172A;

  --text-primary:   #F1F5F9;
  --text-secondary: #94A3B8;
  --text-tertiary:  #64748B;
  --text-inverse:   #0F172A;
  --text-link:      #818CF8;

  --border-primary:   #334155;
  --border-secondary: #1E293B;
  --border-focus:     #818CF8;

  --glass-bg:       rgba(30, 41, 59, 0.7);
  --glass-border:   rgba(71, 85, 105, 0.3);

  --scrollbar-track: #1E293B;
  --scrollbar-thumb: #475569;
  --scrollbar-thumb-hover: #64748B;

  --chart-grid:     #334155;
  --chart-text:     #94A3B8;

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}