/* variables.css */
/* ========================================
   المشروع الجديد - CSS Custom Properties
   الألوان والخطوط والمتغيرات العامة
   ======================================== */

:root {
    /* ===== الألوان الأساسية (Colors) ===== */
    /* الألوان الرئيسية */
    --primary: #4A235A;          /* البنفسجي الملكي */
    --primary-light: #6B3A7A;    /* بنفسجي فاتح */
    --accent: #C9A96E;           /* الذهبي الهادئ */
    --accent-light: #DAC084;     /* ذهبي فاتح */
    
    /* الألوان الداكنة (Dark Theme) */
    --dark: #2E163A;             /* أغمق من البنفسجي */
    --dark-mid: #381F48;         /* متوسط داكن */
    --dark-card: #432752;        /* خلفية البطاقات */
    
    /* الألوان الفاتحة والنصية */
    --white: #FDF8F5;            /* الأبيض الدافئ */
    --text: #4A4A4A;             /* الرمادي النصي */
    --text-muted: #7A7A7A;       /* رمادي باهت */
    
    /* ===== التدرجات اللونية (Gradients) ===== */
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--accent));
    --gradient-primary-light: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    --gradient-text: linear-gradient(135deg, var(--primary-light), var(--accent));
    --gradient-text-alt: linear-gradient(135deg, var(--primary-light), var(--accent), var(--accent-light));
    --gradient-whatsapp: linear-gradient(135deg, #25D366, #128C7E);
    --gradient-card-overlay: linear-gradient(135deg, rgba(74,35,90,0.08), rgba(201,169,110,0.08));
    --gradient-hero-overlay: linear-gradient(to top, rgba(46,22,58,0.6) 0%, transparent 50%);
    
    /* ===== الألوان الخلفية الشفافة (Backgrounds with opacity) ===== */
    --bg-primary-soft: rgba(74,35,90,0.1);
    --bg-primary-medium: rgba(74,35,90,0.15);
    --bg-primary-dark: rgba(74,35,90,0.2);
    --bg-accent-soft: rgba(201,169,110,0.1);
    --bg-accent-medium: rgba(201,169,110,0.15);
    --bg-accent-dark: rgba(201,169,110,0.2);
    --bg-white-soft: rgba(253,248,245,0.04);
    --bg-dark-card: var(--dark-card);
    
    /* ===== ألوان الواتساب والحالات ===== */
    --whatsapp: #25D366;
    --whatsapp-dark: #128C7E;
    
    /* ===== ألوان الحدود (Borders) ===== */
    --border-primary-light: rgba(74,35,90,0.12);
    --border-primary-medium: rgba(74,35,90,0.15);
    --border-primary-strong: rgba(74,35,90,0.18);
    --border-accent-light: rgba(201,169,110,0.2);
    --border-accent-medium: rgba(201,169,110,0.3);
    --border-accent-strong: rgba(201,169,110,0.4);
    --border-white-soft: rgba(253,248,245,0.05);
    
    /* ===== ألوان الظلال (Shadows) ===== */
    --shadow-primary: 0 8px 30px rgba(74,35,90,0.3);
    --shadow-primary-strong: 0 12px 40px rgba(74,35,90,0.4);
    --shadow-accent: 0 8px 30px rgba(201,169,110,0.4);
    --shadow-accent-strong: 0 12px 40px rgba(201,169,110,0.35);
    --shadow-whatsapp: 0 4px 20px rgba(37,211,102,0.25);
    --shadow-whatsapp-strong: 0 12px 40px rgba(37,211,102,0.35);
    --shadow-card: 0 16px 50px rgba(74,35,90,0.2);
    --shadow-hero: 0 30px 80px rgba(74,35,90,0.3);
    
    /* ===== الخطوط (Font Family) ===== */
    --font-primary: 'Tajawal', sans-serif;
    --font-heading: 'Noto Kufi Arabic', sans-serif;
    
    /* ===== أحجام الخطوط (Font Sizes) ===== */
    --text-xs: 0.72rem;     /* 11.5px تقريبًا */
    --text-sm: 0.75rem;     /* 12px */
    --text-base: 0.82rem;   /* 13px */
    --text-md: 0.88rem;     /* 14px */
    --text-lg: 0.95rem;     /* 15px */
    --text-xl: 1rem;        /* 16px */
    --text-2xl: 1.05rem;    /* 16.8px */
    --text-3xl: 1.1rem;     /* 17.6px */
    --text-4xl: 1.3rem;     /* 20.8px */
    --text-5xl: 1.4rem;     /* 22.4px */
    --text-6xl: 1.9rem;     /* 30.4px */
    --text-7xl: 2rem;       /* 32px */
    --text-8xl: 2.8rem;     /* 44.8px */
    --text-9xl: 3.2rem;     /* 51.2px */
    --text-10xl: 4.5rem;    /* 72px */
    
    /* ===== أوزان الخطوط (Font Weights) ===== */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* ===== تباعد الأسطر (Line Heights) ===== */
    --leading-tight: 1.1;
    --leading-normal: 1.2;
    --leading-relaxed: 1.6;
    --leading-loose: 1.7;
    --leading-extra-loose: 1.8;
    
    /* ===== المسافات (Spacing) ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 28px;
    --spacing-4xl: 32px;
    --spacing-5xl: 40px;
    --spacing-6xl: 48px;
    --spacing-7xl: 52px;
    --spacing-8xl: 56px;
    --spacing-9xl: 80px;
    --spacing-10xl: 90px;
    --spacing-11xl: 100px;
    --spacing-12xl: 110px;
    
    /* ===== أنصاف الأقطار (Border Radius) ===== */
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 100px;
    --radius-round: 50%;
    
    /* ===== مدة الانتقالات (Transitions) ===== */
    --transition-fast: 0.15s;
    --transition-normal: 0.22s;
    --transition-slow: 0.3s;
    --transition-slower: 0.35s;
    --transition-slowest: 0.38s;
    
    /* ===== منحنيات الحركة (Transition Timings) ===== */
    --ease-default: ease;
    --ease-cubic: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ===== الطبقات (Z-Index) ===== */
    --z-negative: -1;
    --z-0: 0;
    --z-1: 1;
    --z-dropdown: 100;
    --z-overlay: 150;
    --z-modal: 200;
    --z-popover: 300;
    --z-tooltip: 400;
    
    /* ===== التعتيم (Opacity) ===== */
    --opacity-hover: 0.85;
    --opacity-disabled: 0.5;
    --opacity-overlay: 0.65;
    
    /* ===== العرض الأقصى للحاويات (Max Widths) ===== */
    --container-sm: 460px;
    --container-md: 480px;
    --container-lg: 500px;
    --container-xl: 520px;
    
    /* ===== النقاط الفاصلة (Breakpoints) ===== */
    --breakpoint-sm: 480px;
    --breakpoint-md: 900px;
    --breakpoint-lg: 1200px;
    
    /* ===== ألوان الخلفيات الشعاعية (Radial Gradients) ===== */
    --radial-glow-1: radial-gradient(ellipse 600px 400px at 20% 20%, rgba(74,35,90,0.15) 0%, transparent 70%);
    --radial-glow-2: radial-gradient(ellipse 500px 400px at 80% 60%, rgba(201,169,110,0.12) 0%, transparent 70%);
    --radial-glow-3: radial-gradient(ellipse, rgba(74,35,90,0.1) 0%, transparent 70%);
    --radial-glow-circle: radial-gradient(circle, rgba(201,169,110,0.2), transparent 70%);
}