/**
 * 🎨 CSS Variables - المتغيرات العامة
 * التاج بلس للديكور
 * 
 * هذا الملف يحتوي على جميع المتغيرات المستخدمة في المشروع
 * - الألوان (Colors)
 * - الظلال (Shadows)
 * - الأبعاد (Spacing & Sizing)
 * - الحواف (Border Radius)
 * - الانتقالات (Transitions)
 */

:root {
  /* ========================================
     الألوان الأساسية - Primary Colors
     ======================================== */
  --primary: #732d60;
  --primary-dark: #4e1a3f;
  --primary-light: #d7bed0;
  --primary-rgb: 115, 45, 96;
  
  /* ========================================
     الألوان الثانوية - Accent Colors
     ======================================== */
  --accent: #f5b253;
  --accent-dark: #cc8a30;
  --accent-light: #ffd89b;
  --accent-rgb: 245, 178, 83;
  
  /* ========================================
     الألوان السطحية - Surface Colors
     ======================================== */
  --surface: #ffffff;
  --surface-dark: #f8f9fa;
  --soft: #f7eef7;
  --soft-2: #efe3f4;
  --soft-3: #fbf6ff;
  
  /* ========================================
     ألوان النصوص - Text Colors
     ======================================== */
  --text: #361d35;
  --text-light: #6b5a6d;
  --muted: #8c7a8f;
  --muted-light: #b8adb9;
  
  /* ========================================
     ألوان الحالات - State Colors
     ======================================== */
  --success: #10b981;
  --success-light: #d1fae5;
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --error: #ef4444;
  --error-light: #fee2e2;
  --info: #3b82f6;
  --info-light: #dbeafe;
  
  /* ========================================
     الظلال - Shadows
     ======================================== */
  --shadow-xs: 0 4px 8px rgba(78, 26, 63, 0.06);
  --shadow-sm: 0 12px 26px rgba(78, 26, 63, 0.1);
  --shadow-md: 0 18px 38px rgba(78, 26, 63, 0.14);
  --shadow-lg: 0 28px 60px rgba(78, 26, 63, 0.18);
  --shadow-xl: 0 38px 80px rgba(78, 26, 63, 0.22);
  
  /* ظلال ملونة */
  --shadow-primary: 0 12px 28px rgba(115, 45, 96, 0.2);
  --shadow-accent: 0 12px 28px rgba(245, 178, 83, 0.2);
  
  /* ========================================
     الحواف - Border Radius
     ======================================== */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  
  /* ========================================
     المسافات - Spacing
     ======================================== */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  
  /* ========================================
     الأحجام - Sizing
     ======================================== */
  --container-max: 1180px;
  --container-padding: 4%;
  
  /* ========================================
     الانتقالات - Transitions
     ======================================== */
  --transition-fast: 0.15s ease;
  --transition-slow: 0.35s ease;
  
  /* ========================================
     الخطوط - Typography
     ======================================== */
  --font-family: 'Almarai', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;
  
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  
  /* ========================================
     الارتفاعات - Z-Index
     ======================================== */
  --z-dropdown: 50;
  --z-sticky: 80;
  --z-fixed: 90;
  --z-modal: 100;
  --z-tooltip: 110;
  
  /* ========================================
     التدرجات - Gradients
     ======================================== */
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  --gradient-soft: linear-gradient(160deg, #fdf6ff 0%, #f3e5f7 40%, #ffffff 100%);
  --gradient-hero: linear-gradient(135deg, rgba(115, 45, 96, 0.95) 0%, rgba(78, 26, 63, 0.92) 100%);
  
  /* ========================================
     الحدود - Borders
     ======================================== */
  --border-width: 1px;
  --border-color: rgba(115, 45, 96, 0.08);
  --border-color-hover: rgba(115, 45, 96, 0.16);
  
  /* ========================================
     التمويه - Blur
     ======================================== */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;
}

/* ========================================
   الوضع الداكن - Dark Mode (اختياري)
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* يمكن إضافة متغيرات الوضع الداكن هنا */
  }
}

/* ========================================
   متغيرات مخصصة للطباعة
   ======================================== */
@media print {
  :root {
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }
}