/* 1. تعریف متغیرهای پیش‌فرض (Light Theme) */
:root {
    --color-background:  #F9FAFB;
    --color-surface:     #FFFFFF;
    --color-border:      #E5E7EB;
    --color-text-primary:#111827;
    --color-text-secondary: #4B5563;

    --color-primary:     #4F46E5; /* Indigo */
    --color-secondary:   #F43F5E; /* Rose */
    --color-success:     #10B981; /* Emerald */
    --color-warning:     #F59E0B; /* Amber */
    --color-danger:      #EF4444; /* Red */
    --color-info:        #3B82F6; /* Blue */
}

/* 2. مقداردهی مجدد برای Dark Theme */
[data-theme="dark"] {
    --color-background:  #1F2937;
    --color-surface:     #111827;
    --color-border:      #374151;
    --color-text-primary:#F9FAFB;
    --color-text-secondary: #D1D5DB;

    --color-primary:     #6366F1;
    --color-secondary:   #F472B6;
    --color-success:     #34D399;
    --color-warning:     #FBBF24;
    --color-danger:      #F87171;
    --color-info:        #60A5FA;
}

/* 3. کلاس‌های عمومی */
.bg-background    { background-color: var(--color-background) !important; }
.bg-surface       { background-color: var(--color-surface)    !important; }
.border            { border: 1px solid var(--color-border)      !important; }

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

/* 4. رنگ‌های اصلی */
.bg-primary       { background-color: var(--color-primary)     !important; }
.text-primary-color { color: var(--color-primary)              !important; }
.border-primary   { border-color: var(--color-primary)         !important; }

.bg-secondary     { background-color: var(--color-secondary)   !important; }
.text-secondary-color { color: var(--color-secondary)          !important; }
.border-secondary { border-color: var(--color-secondary)       !important; }

/* 5. وضعیت‌ها */
.bg-success       { background-color: var(--color-success)     !important; }
.text-success     { color: var(--color-success)                !important; }
.bg-warning       { background-color: var(--color-warning)     !important; }
.text-warning     { color: var(--color-warning)                !important; }
.bg-danger        { background-color: var(--color-danger)      !important; }
.text-danger      { color: var(--color-danger)                 !important; }
.bg-info          { background-color: var(--color-info)        !important; }
.text-info        { color: var(--color-info)                   !important; }

/* 6. حالت Hover برای دکمه‌ها */
.btn {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: .375rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* مشابه برای سایر وضعیت‌ها */
.btn-success {
    background-color: var(--color-success);
    color: var(--color-surface);
    border-color: var(--color-success);
}
.btn-success:hover {
    background-color: var(--color-surface);
    color: var(--color-success);
    border-color: var(--color-success);
}