/* تنسيقات مخصصة للموقع */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

:root {
    /* الألوان الأساسية */
    --bg-primary: #111827; /* اللون الأساسي للخلفية - داكن */
    --bg-secondary: #1f2937; /* اللون الثانوي للخلفية - داكن */
    --bg-tertiary: #374151; /* لون ثالث للخلفية - داكن */
    --bg-accent: #000000; /* لون التأكيد للخلفية - أسود */
    
    /* قيم RGB للألوان (للشفافية) */
    --bg-primary-rgb: 17, 24, 39;
    --bg-secondary-rgb: 31, 41, 55;
    --bg-tertiary-rgb: 55, 65, 81;
    --bg-accent-rgb: 0, 0, 0;
    --accent-primary-rgb: 59, 130, 246;
    --accent-secondary-rgb: 96, 165, 250;
    
    /* ألوان شفافة */
    --bg-primary-transparent: rgba(17, 24, 39, 0.7);
    --bg-secondary-transparent: rgba(31, 41, 55, 0.7);
    --accent-primary-transparent: rgba(59, 130, 246, 0.2);
    
    /* ألوان النصوص */
    --text-primary: #ffffff; /* لون النص الرئيسي - أبيض */
    --text-secondary: #d1d5db; /* لون النص الثانوي - رمادي فاتح */
    --text-tertiary: #9ca3af; /* لون النص الإضافي - رمادي متوسط */
    
    /* ألوان التأكيد */
    --accent-primary: #3b82f6; /* لون التأكيد الرئيسي - أزرق */
    --accent-secondary: #60a5fa; /* لون التأكيد الثانوي - أزرق فاتح */
    --accent-primary-light: #93c5fd; /* لون أفتح للتأكيد */
    
    /* ألوان أخرى */
    --border-color: #4b5563; /* لون الحدود - رمادي داكن */
    --card-bg: #1f2937; /* خلفية البطاقات - رمادي داكن */
    --shadow-color: rgba(0, 0, 0, 0.5); /* لون الظلال - أسود شفاف */
    --gradient-primary: linear-gradient(to right, #3b82f6, #8b5cf6); /* تدرج رئيسي */
}

/* متغيرات الوضع النهاري */
[data-theme="light"] {
    /* الألوان الأساسية */
    --bg-primary: #f9fafb; /* اللون الأساسي للخلفية - أبيض مائل للرمادي */
    --bg-secondary: #f3f4f6; /* اللون الثانوي للخلفية - رمادي فاتح جداً */
    --bg-tertiary: #e5e7eb; /* لون ثالث للخلفية - رمادي فاتح */
    --bg-accent: #ffffff; /* لون التأكيد للخلفية - أبيض */
    
    /* قيم RGB للألوان (للشفافية) */
    --bg-primary-rgb: 249, 250, 251;
    --bg-secondary-rgb: 243, 244, 246;
    --bg-tertiary-rgb: 229, 231, 235;
    --bg-accent-rgb: 255, 255, 255;
    --accent-primary-rgb: 37, 99, 235;
    --accent-secondary-rgb: 59, 130, 246;
    
    /* ألوان شفافة */
    --bg-primary-transparent: rgba(249, 250, 251, 0.7);
    --bg-secondary-transparent: rgba(243, 244, 246, 0.7);
    --accent-primary-transparent: rgba(37, 99, 235, 0.2);
    
    /* ألوان النصوص */
    --text-primary: #111827; /* لون النص الرئيسي - أسود */
    --text-secondary: #4b5563; /* لون النص الثانوي - رمادي داكن */
    --text-tertiary: #6b7280; /* لون النص الإضافي - رمادي متوسط */
    
    /* ألوان التأكيد */
    --accent-primary: #2563eb; /* لون التأكيد الرئيسي - أزرق داكن */
    --accent-secondary: #3b82f6; /* لون التأكيد الثانوي - أزرق */
    --accent-primary-light: #60a5fa; /* لون أفتح للتأكيد */
    
    /* ألوان أخرى */
    --border-color: #d1d5db; /* لون الحدود - رمادي فاتح */
    --card-bg: #ffffff; /* خلفية البطاقات - أبيض */
    --shadow-color: rgba(0, 0, 0, 0.1); /* لون الظلال - أسود شفاف خفيف */
    --gradient-primary: linear-gradient(to right, #2563eb, #7c3aed); /* تدرج رئيسي */
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Tajawal', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* تأثيرات الروابط */
.hover-effect {
    position: relative;
}

.hover-effect::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0; /* تغيير للغة العربية */
    width: 0;
    height: 2px;
    background-color: var(--accent-primary);
    transition: width 0.3s ease;
}

.hover-effect:hover::after {
    width: 100%;
}

/* زر تبديل الوضع */
.theme-toggle {
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    background-color: transparent;
    border: 2px solid var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    background-color: var(--accent-primary);
    color: white;
    transform: scale(1.05);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
}

/* تأثيرات صور المعرض */
.gallery-item {
    box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px var(--shadow-color), 0 10px 10px -5px var(--shadow-color);
}

/* تأثيرات الأزرار */
button, .button {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background-color: var(--accent-primary);
    color: white;
}

button:after, .button:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: width 0.3s ease;
    z-index: -1;
}

button:hover:after, .button:hover:after {
    width: 100%;
}

/* تأثيرات العناصر */
.scale-hover {
    transition: transform 0.3s ease;
}

.scale-hover:hover {
    transform: scale(1.05);
}

/* تأثيرات قسم الاتصال */
#contact input, #contact textarea {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

#contact input:focus, #contact textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* تأثيرات الفوتر */
footer {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-accent);
}

footer:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
}

/* تنسيقات إضافية للتجاوب مع الشاشات الصغيرة */
@media (max-width: 768px) {
    header h1 {
        font-size: 2.5rem;
    }
    
    header p {
        font-size: 1rem;
    }
    
    .container {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

/* تنسيقات لمكتبة lightGallery */
.lg-backdrop {
    background-color: rgba(0, 0, 0, 0.9);
}

.lg-toolbar,
.lg-prev,
.lg-next {
    background-color: transparent;
}

/* تنسيقات لتأثيرات AOS */
[data-aos] {
    pointer-events: none;
}

[data-aos].aos-animate {
    pointer-events: auto;
}

/* تنسيقات إضافية للشريط العلوي */
nav {
    transition: background-color 0.3s ease, padding 0.3s ease;
    background-color: var(--bg-accent);
    backdrop-filter: blur(12px);
}

nav.scrolled {
    background-color: var(--bg-accent);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* تحسينات للقسم الرئيسي */
.hero-button {
    position: relative;
    overflow: hidden;
}

.hero-button:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: width 0.4s ease;
    z-index: -1;
}

.hero-button:hover:before {
    width: 100%;
}

/* تأثيرات متقدمة للصور */
.image-zoom {
    overflow: hidden;
}

.image-zoom img {
    transition: transform 0.5s ease;
}

.image-zoom:hover img {
    transform: scale(1.1);
}

/* تنسيقات النص في الوضع النهاري */
[data-theme="light"] .bg-clip-text.text-transparent {
    color: var(--text-primary);
}

/* تنسيقات البطاقات */
[data-theme="light"] .bg-gray-700,
[data-theme="light"] .bg-gray-800,
[data-theme="light"] .bg-gray-800\/50 {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400 {
    color: var(--text-secondary);
}

/* تنسيقات الزر */
[data-theme="light"] .bg-blue-600 {
    background-color: var(--accent-primary);
}

[data-theme="light"] .hover\:bg-blue-700:hover {
    background-color: var(--accent-secondary);
}

/* تنسيقات particles.js للوضع النهاري */
[data-theme="light"] #particles-js canvas {
    filter: invert(1);
}