/**
 * CSS Variables - Classic Luxury Theme
 *
 * نظام الألوان والمتغيرات للثيم الفاخر
 *
 * @version 1.0.0
 * @date 2025-11-16
 */

:root {
    /* ===== الألوان الرئيسية ===== */
    /* تم نقل الألوان الأساسية إلى قاعدة البيانات */
    /* يتم توليدها ديناميكياً من colors.php */
    /* --primary-color, --primary-dark, --primary-light, --primary-gradient */
    /* --secondary-color, --secondary-dark, --secondary-light, --secondary-gradient */
    /* --accent-color */

    /* ===== الألوان المحايدة ===== */
    --text-dark: #2c3e50;              /* نص غامق */
    --text-medium: #4a5568;            /* نص متوسط */
    --text-light: #6c757d;             /* نص فاتح */
    --text-muted: #95a5a6;             /* نص باهت */

    --bg-white: #ffffff;               /* خلفية بيضاء */
    --bg-light: #f8f9fa;               /* خلفية فاتحة */
    --bg-lighter: #f1f3f5;             /* خلفية أفتح */
    --bg-dark: #343a40;                /* خلفية غامقة */

    --border-color: #e2e8f0;           /* لون الحدود */
    --border-light: #f1f3f5;           /* حدود فاتحة */

    /* ===== الخطوط ===== */
    --font-heading: 'Cairo', 'Tajawal', sans-serif;
    --font-body: 'IBM Plex Sans Arabic', 'Roboto', sans-serif;
    --font-numbers: 'Roboto', sans-serif;

    /* أحجام الخطوط */
    --font-size-xs: 0.75rem;           /* 12px */
    --font-size-sm: 0.875rem;          /* 14px */
    --font-size-base: 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-size-5xl: 3rem;             /* 48px */

    /* ===== المسافات ===== */
    --spacing-xs: 0.25rem;             /* 4px */
    --spacing-sm: 0.5rem;              /* 8px */
    --spacing-md: 1rem;                /* 16px */
    --spacing-lg: 1.5rem;              /* 24px */
    --spacing-xl: 2rem;                /* 32px */
    --spacing-2xl: 3rem;               /* 48px */
    --spacing-3xl: 4rem;               /* 64px */
    --spacing-4xl: 6rem;               /* 96px */

    /* ===== الظلال ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* ===== الحواف المستديرة ===== */
    --radius-sm: 0.25rem;              /* 4px */
    --radius-md: 0.5rem;               /* 8px */
    --radius-lg: 0.75rem;              /* 12px */
    --radius-xl: 1rem;                 /* 16px */
    --radius-2xl: 1.5rem;              /* 24px */
    --radius-full: 9999px;             /* دائري */

    /* ===== الانتقالات ===== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* ===== Breakpoints (للاستخدام في JS) ===== */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* ===== Z-index Layers ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ===== أبعاد خاصة بالمكونات ===== */
    --hero-height-compact: 400px;
    --hero-height-medium: 600px;
    --hero-height-tall: 800px;

    --card-padding: var(--spacing-lg);
    --card-radius: var(--radius-lg);

    --container-max-width: 1320px;
}

/* ===== Dark Mode (اختياري - للمستقبل) ===== */
[data-theme="dark"] {
    --text-dark: #f8f9fa;
    --text-medium: #e9ecef;
    --text-light: #dee2e6;
    --bg-white: #1a1a1a;
    --bg-light: #2d2d2d;
    --border-color: #404040;
}

/* ===== دعم RTL ===== */
[dir="rtl"] {
    --text-align: right;
    --text-align-opposite: left;
    --flex-direction: row-reverse;
    --float-start: right;
    --float-end: left;
}

[dir="ltr"] {
    --text-align: left;
    --text-align-opposite: right;
    --flex-direction: row;
    --float-start: left;
    --float-end: right;
}