/**
 * Zibayab Core - CSS Variables & Base Styles
 * فایل مرکزی متغیرهای CSS و استایل‌های پایه
 * 
 * @package Zibayab_Core
 * @version 1.1.0
 */

@font-face {
    font-family: 'Vazirmatn';
    src: url('../vendor/vazirmatn/Vazirmatn-Variable.woff2') format('woff2-variations');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

/* ============================================
   متغیرهای رنگی اصلی
   ============================================ */
:root {
    /* رنگ‌های اصلی برند */
    --bdb-primary: #5C7AEA;           /* آبی سلطنتی */
    --bdb-primary-dark: #5C7AEA;      /* آبی تیره */
    --bdb-primary-light: #D5D5E8;     /* آبی روشن */
    
    --bdb-secondary: #1F2A44;         /* سرمه‌ای */
    --bdb-secondary-light: #3A435F;   /* سرمه‌ای روشن */
    
    --bdb-accent: #F3C6C6;            /* صورتی-قرمز */
    --bdb-accent-light: #F3C6C6;      /* صورتی کمرنگ */
    
    --bdb-success: #10B981;           /* سبز موفقیت */
    --bdb-success-light: #D1FAE5;     /* سبز کمرنگ */
    
    --bdb-warning: #F59E0B;           /* نارنجی هشدار */
    --bdb-warning-light: #FEF3C7;     /* نارنجی کمرنگ */
    
    --bdb-danger: #DC2626;            /* قرمز خطر */
    --bdb-danger-light: #FEE2E2;      /* قرمز کمرنگ */
    
    --bdb-info: #3B82F6;              /* آبی اطلاعات */
    --bdb-info-light: #DBEAFE;        /* آبی کمرنگ */
    
    /* رنگ‌های خاکستری */
    --bdb-gray-50: #FAFAFA;
    --bdb-gray-100: #FAFAFA;
    --bdb-gray-200: #D5D5E8;
    --bdb-gray-300: #D5D5E8;
    --bdb-gray-400: #D5D5E8;
    --bdb-gray-500: #3A435F;
    --bdb-gray-600: #3A435F;
    --bdb-gray-700: #3A435F;
    --bdb-gray-800: #1F2A44;
    --bdb-gray-900: #111827;
    
    /* رنگ‌های پس‌زمینه */
    --bdb-bg-primary: #FFFFFF;
    --bdb-bg-secondary: #FAFAFA;
    --bdb-bg-tertiary: #D5D5E8;
    --bdb-bg-dark: #111827;
    
    /* رنگ‌های متن */
    --bdb-text-primary: #1F2A44;
    --bdb-text-secondary: #3A435F;
    --bdb-text-tertiary: #3A435F;
    --bdb-text-light: #94A3B8;
    --bdb-text-inverse: #FFFFFF;
    
    /* رنگ‌های مرز */
    --bdb-border-light: #E2E8F0;
    --bdb-border-medium: #CBD5E1;
    --bdb-border-dark: #94A3B8;
    
    /* ============================================
       فاصله‌گذاری (Spacing)
       ============================================ */
    --bdb-spacing-xs: 4px;
    --bdb-spacing-sm: 8px;
    --bdb-spacing-md: 12px;
    --bdb-spacing-base: 16px;
    --bdb-spacing-lg: 20px;
    --bdb-spacing-xl: 24px;
    --bdb-spacing-2xl: 32px;
    --bdb-spacing-3xl: 40px;
    --bdb-spacing-4xl: 48px;
    
    /* ============================================
       گوشه‌ها (Border Radius)
       ============================================ */
    --bdb-radius-sm: 4px;
    --bdb-radius-md: 6px;
    --bdb-radius-base: 8px;
    --bdb-radius-lg: 12px;
    --bdb-radius-xl: 16px;
    --bdb-radius-2xl: 20px;
    --bdb-radius-full: 9999px;
    
    /* ============================================
       سایه‌ها (Shadows)
       ============================================ */
    --bdb-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bdb-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --bdb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --bdb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --bdb-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --bdb-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* ============================================
       فونت‌ها
       ============================================ */
    --bdb-font-family: 'Vazirmatn', 'Tahoma', sans-serif;
    --bdb-font-family-bold: 'Vazirmatn', 'Tahoma', sans-serif;
    
    --bdb-font-size-xs: 12px;
    --bdb-font-size-sm: 12px;
    --bdb-font-size-base: 14px;
    --bdb-font-size-md: 15px;
    --bdb-font-size-lg: 16px;
    --bdb-font-size-xl: 18px;
    --bdb-font-size-2xl: 20px;
    --bdb-font-size-3xl: 24px;
    --bdb-font-size-4xl: 28px;
    --bdb-font-size-5xl: 32px;
    
    --bdb-font-weight-normal: 400;
    --bdb-font-weight-medium: 500;
    --bdb-font-weight-semibold: 600;
    --bdb-font-weight-bold: 700;
    --bdb-font-weight-black: 900;
    
    --bdb-line-height-tight: 1.2;
    --bdb-line-height-snug: 1.4;
    --bdb-line-height-normal: 1.6;
    --bdb-line-height-relaxed: 1.8;
    
    /* ============================================
       انتقال‌ها (Transitions)
       ============================================ */
    --bdb-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --bdb-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --bdb-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ============================================
       ارتفاع‌ها (Z-index)
       ============================================ */
    --bdb-z-dropdown: 1000;
    --bdb-z-sticky: 1020;
    --bdb-z-fixed: 1030;
    --bdb-z-modal-backdrop: 1040;
    --bdb-z-modal: 1050;
    --bdb-z-popover: 1060;
    --bdb-z-tooltip: 1070;
    
    /* ============================================
       عرض‌های ماکزیمم
       ============================================ */
    --bdb-max-width-xs: 320px;
    --bdb-max-width-sm: 480px;
    --bdb-max-width-md: 640px;
    --bdb-max-width-lg: 768px;
    --bdb-max-width-xl: 1024px;
    --bdb-max-width-2xl: 1200px;
    --bdb-max-width-3xl: 1280px;
    --bdb-max-width-full: 100%;
}

/* ============================================
   Fallback برای مرورگرهای قدیمی
   ============================================ */
.bdb-ie-fallback {
    /* رنگ‌های پایه */
    color: #1F2A44;
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

.bdb-ie-fallback .bdb-primary-color {
    color: #5C7AEA;
}

.bdb-ie-fallback .bdb-primary-bg {
    background-color: #5C7AEA;
}

/* ============================================
   کلاس‌های کمکی رنگ
   ============================================ */
.bdb-text-primary { color: var(--bdb-text-primary); }
.bdb-text-secondary { color: var(--bdb-text-secondary); }
.bdb-text-tertiary { color: var(--bdb-text-tertiary); }
.bdb-text-light { color: var(--bdb-text-light); }
.bdb-text-success { color: var(--bdb-success); }
.bdb-text-warning { color: var(--bdb-warning); }
.bdb-text-danger { color: var(--bdb-danger); }

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

/* ============================================
   کلاس‌های کمکی فاصله‌گذاری
   ============================================ */
.bdb-m-0 { margin: 0; }
.bdb-mt-sm { margin-top: var(--bdb-spacing-sm); }
.bdb-mt-md { margin-top: var(--bdb-spacing-md); }
.bdb-mt-base { margin-top: var(--bdb-spacing-base); }
.bdb-mt-lg { margin-top: var(--bdb-spacing-lg); }
.bdb-mb-sm { margin-bottom: var(--bdb-spacing-sm); }
.bdb-mb-md { margin-bottom: var(--bdb-spacing-md); }
.bdb-mb-base { margin-bottom: var(--bdb-spacing-base); }
.bdb-mb-lg { margin-bottom: var(--bdb-spacing-lg); }

.bdb-p-0 { padding: 0; }
.bdb-p-sm { padding: var(--bdb-spacing-sm); }
.bdb-p-md { padding: var(--bdb-spacing-md); }
.bdb-p-base { padding: var(--bdb-spacing-base); }
.bdb-p-lg { padding: var(--bdb-spacing-lg); }

/* ============================================
   کلاس‌های کمکی نمایش
   ============================================ */
.bdb-hidden { display: none !important; }
.bdb-block { display: block; }
.bdb-inline-block { display: inline-block; }
.bdb-flex { display: flex; }
.bdb-inline-flex { display: inline-flex; }
.bdb-grid { display: grid; }

/* ============================================
   کلاس‌های کمکی Flexbox
   ============================================ */
.bdb-flex-row { flex-direction: row; }
.bdb-flex-col { flex-direction: column; }
.bdb-items-center { align-items: center; }
.bdb-items-start { align-items: flex-start; }
.bdb-items-end { align-items: flex-end; }
.bdb-justify-center { justify-content: center; }
.bdb-justify-between { justify-content: space-between; }
.bdb-justify-start { justify-content: flex-start; }
.bdb-justify-end { justify-content: flex-end; }
.bdb-gap-sm { gap: var(--bdb-spacing-sm); }
.bdb-gap-md { gap: var(--bdb-spacing-md); }
.bdb-gap-base { gap: var(--bdb-spacing-base); }
.bdb-gap-lg { gap: var(--bdb-spacing-lg); }

/* ============================================
   کلاس‌های کمکی متن
   ============================================ */
.bdb-text-center { text-align: center; }
.bdb-text-right { text-align: right; }
.bdb-text-left { text-align: left; }
.bdb-font-normal { font-weight: var(--bdb-font-weight-normal); }
.bdb-font-medium { font-weight: var(--bdb-font-weight-medium); }
.bdb-font-semibold { font-weight: var(--bdb-font-weight-semibold); }
.bdb-font-bold { font-weight: var(--bdb-font-weight-bold); }
.bdb-font-black { font-weight: var(--bdb-font-weight-black); }

/* ============================================
   کلاس‌های کمکی گوشه
   ============================================ */
.bdb-rounded-sm { border-radius: var(--bdb-radius-sm); }
.bdb-rounded-md { border-radius: var(--bdb-radius-md); }
.bdb-rounded-base { border-radius: var(--bdb-radius-base); }
.bdb-rounded-lg { border-radius: var(--bdb-radius-lg); }
.bdb-rounded-xl { border-radius: var(--bdb-radius-xl); }
.bdb-rounded-full { border-radius: var(--bdb-radius-full); }

/* ============================================
   کلاس‌های کمکی سایه
   ============================================ */
.bdb-shadow-xs { box-shadow: var(--bdb-shadow-xs); }
.bdb-shadow-sm { box-shadow: var(--bdb-shadow-sm); }
.bdb-shadow-md { box-shadow: var(--bdb-shadow-md); }
.bdb-shadow-lg { box-shadow: var(--bdb-shadow-lg); }
.bdb-shadow-xl { box-shadow: var(--bdb-shadow-xl); }
.bdb-shadow-none { box-shadow: none; }

/* ============================================
   کلاس‌های کمکی انتقال
   ============================================ */
.bdb-transition { transition: all var(--bdb-transition-base); }
.bdb-transition-fast { transition: all var(--bdb-transition-fast); }
.bdb-transition-slow { transition: all var(--bdb-transition-slow); }

/* ============================================
   استایل‌های پایه
   ============================================ */
.bdb-container {
    width: 100%;
    max-width: var(--bdb-max-width-2xl);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--bdb-spacing-base);
    padding-left: var(--bdb-spacing-base);
}

.bdb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bdb-spacing-sm);
    padding: var(--bdb-spacing-md) var(--bdb-spacing-lg);
    border: 1px solid transparent;
    border-radius: var(--bdb-radius-base);
    font-family: var(--bdb-font-family);
    font-size: var(--bdb-font-size-base);
    font-weight: var(--bdb-font-weight-semibold);
    line-height: var(--bdb-line-height-tight);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--bdb-transition-base);
    white-space: nowrap;
}

.bdb-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--bdb-shadow-md);
}

.bdb-btn:active {
    transform: translateY(0);
}

.bdb-btn-primary {
    background-color: var(--bdb-primary);
    color: var(--bdb-text-inverse);
}

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

.bdb-btn-secondary {
    background-color: var(--bdb-secondary);
    color: var(--bdb-text-inverse);
}

.bdb-btn-success {
    background-color: var(--bdb-success);
    color: var(--bdb-text-inverse);
}

.bdb-btn-outline {
    background-color: transparent;
    border-color: var(--bdb-border-medium);
    color: var(--bdb-text-primary);
}

.bdb-btn-outline:hover {
    background-color: var(--bdb-bg-secondary);
    border-color: var(--bdb-primary);
    color: var(--bdb-primary);
}

/* ============================================
   نوتیفیکیشن
   ============================================ */
.bdb-notice {
    padding: var(--bdb-spacing-base);
    border-radius: var(--bdb-radius-base);
    border: 1px solid transparent;
    margin-bottom: var(--bdb-spacing-lg);
}

.bdb-notice-success {
    background-color: var(--bdb-success-light);
    border-color: var(--bdb-success);
    color: #065F46;
}

.bdb-notice-warning {
    background-color: var(--bdb-warning-light);
    border-color: var(--bdb-warning);
    color: #92400E;
}

.bdb-notice-error {
    background-color: var(--bdb-danger-light);
    border-color: var(--bdb-danger);
    color: #991B1B;
}

.bdb-notice-info {
    background-color: var(--bdb-info-light);
    border-color: var(--bdb-info);
    color: #1E40AF;
}

/* ============================================
   لودینگ
   ============================================ */
.bdb-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--bdb-border-light);
    border-top-color: var(--bdb-primary);
    border-radius: var(--bdb-radius-full);
    animation: bdb-spin 0.6s linear infinite;
}

@keyframes bdb-spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   ریسپانسیو
   ============================================ */
@media (max-width: 768px) {
    .bdb-container {
        padding-right: var(--bdb-spacing-md);
        padding-left: var(--bdb-spacing-md);
    }
}