/* ===================================
   MediCare Pro - CSS Variables
   =================================== */

/* Global CSS Variables */
:root {
    /* الألوان الأساسية من اللوغو الطبي */
    --primary-green: #00A651;     /* الأخضر الأساسي من اللوغو */
    --dark-green: #008040;        /* الأخضر الداكن للتدرجات */
    --light-green: #33C481;       /* الأخضر الفاتح للـ hover */
    --medical-white: #FFFFFF;     /* الأبيض الطبي */
    --text-color: #333333;        /* لون النص الأساسي */
    
    /* ألوان طبية إضافية */
    --medical-gray: #f8f9fa;      /* خلفية طبية فاتحة */
    --medical-border: #e8f5e8;    /* حدود طبية خفيفة */
    --text-dark: #2c3e50;         /* نص داكن طبي */
    --text-light: #6c757d;        /* نص فاتح طبي */
    --white: #ffffff;
    
    /* ألوان الحالة الطبية */
    --success-color: #00A651;     /* نجاح - أخضر طبي */
    --danger-color: #e74c3c;      /* خطر - أحمر طبي */
    --warning-color: #f39c12;     /* تحذير - برتقالي طبي */
    --info-color: #3498db;        /* معلومات - أزرق طبي */
    
    /* الظلال الطبية المحسنة */
    --shadow-light: 0 2px 8px rgba(0, 166, 81, 0.08);
    --shadow-medium: 0 4px 20px rgba(0, 166, 81, 0.12);
    --shadow-heavy: 0 8px 30px rgba(0, 166, 81, 0.15);
    --shadow-card: 0 6px 25px rgba(0, 166, 81, 0.1);
    
    /* حدود وتدرجات طبية */
    --border-light: 1px solid rgba(0, 166, 81, 0.2);
    --border-accent: 2px solid rgba(0, 166, 81, 0.3);
    --gradient-primary: linear-gradient(135deg, var(--primary-green), var(--dark-green));
    --gradient-light: linear-gradient(135deg, var(--light-green), var(--primary-green));
    --gradient-divider: linear-gradient(90deg, transparent 0%, rgba(0, 166, 81, 0.4) 50%, transparent 100%);
    
    /* متغيرات الأيقونات الطبية */
    --icon-bg-primary: var(--primary-green);
    --icon-color-primary: var(--white);
    --icon-bg-secondary: var(--white);
    --icon-color-secondary: var(--primary-green);
    --icon-shadow: 0 3px 12px rgba(0, 166, 81, 0.2);
    
    /* الحدود والانتقالات */
    --border-radius: 8px;
    --border-radius-lg: 15px;
    --border-radius-icon: 50%;
    --transition: all 0.3s ease;
    --transition-fast: all 0.2s ease;
}

/* Global Font Settings */
body {
    font-family: 'Cairo', sans-serif;
}

/* Ensure variables are available everywhere */
*, *::before, *::after {
    box-sizing: border-box;
}