/*
========================================
    هوية ألوان الموقع الرسمية
    شركة عبدالرحمن بن عبدالله العقلا
    للمحاماة والاستشارات القانونية
========================================
*/

:root {
    /* الألوان الرئيسية */
    --primary-color: #09334f;      /* الأزرق الداكن - اللون الأساسي */
    --secondary-color: #f1ece2;    /* البيج الفاتح - اللون الثانوي */
    --accent-color: #b8a18b;       /* الذهبي/البيج - اللون المميز */
    
    /* درجات اللون الأساسي */
    --primary-dark: #061f2f;
    --primary-light: #0d4766;
    --primary-lighter: #1a5d82;
    
    /* درجات اللون الثانوي */
    --secondary-dark: #e8e1d5;
    --secondary-light: #f6f3eb;
    
    /* درجات اللون المميز */
    --accent-dark: #9d8973;
    --accent-light: #c9b19a;
    
    /* الألوان المساعدة */
    --white: #ffffff;
    --black: #000000;
    --text-primary: #2c2c2c;
    --text-secondary: #6c757d;
    --border-color: #e9ecef;
}

/* أمثلة على استخدام المتغيرات */
.primary-bg {
    background-color: var(--primary-color);
}

.secondary-bg {
    background-color: var(--secondary-color);
}

.accent-bg {
    background-color: var(--accent-color);
}

.primary-text {
    color: var(--primary-color);
}

.accent-text {
    color: var(--accent-color);
}

/* الأزرار بالألوان الرسمية */
.btn-primary-custom {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.btn-primary-custom:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-accent {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--white);
}

.btn-accent:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* الحدود بالألوان الرسمية */
.border-primary {
    border-color: var(--primary-color) !important;
}

.border-accent {
    border-color: var(--accent-color) !important;
}

/* Gradients */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--white) 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%);
}