/* 🎨 Card Custom Styles - Using Design System Variables */

/* 📦 Card border / header primary */
.card.border-primary {
    border-color: var(--primary) !important;
}

.card-header.bg-primary {
    background-color: var(--primary) !important;
    color: var(--text-white) !important;
}

.card {
    background: var(--bg-transparent) !important;
    border-radius: var(--radius-xl);
    transition: all var(--transition-normal);
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary) !important;
    display: block;
    border: 1px solid var(--border-default) !important;
    box-shadow: none !important;
}

.card:hover {
    border-color: var(--primary) !important;
}

/* Card Title and Text */
.card-title {
    color: var(--text-primary) !important;
}

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

.card-subtitle {
    color: var(--text-muted) !important;
}

/* Card Footer */
.card-footer {
    background-color: var(--bg-lighter) !important;
    border-top-color: var(--border-light) !important;
    color: var(--text-secondary) !important;
}

/* Card Link */
.card-link {
    color: var(--primary) !important;
}

.card-link:hover {
    color: var(--primary-hover) !important;
}

/* Card with different backgrounds */
.card.bg-white {
    background-color: var(--bg-transparent) !important;
    color: var(--text-primary) !important;
}

.card.bg-light {
    background-color: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

.card.bg-dark {
    background-color: var(--bg-light) !important;
    color: var(--text-primary) !important;
}

/* Card Header variations */
.card-header {
    background-color: var(--bg-lighter) !important;
    border-bottom-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

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

.card-header.bg-success {
    background-color: var(--success) !important;
    color: var(--text-white) !important;
}

.card-header.bg-danger {
    background-color: var(--danger) !important;
    color: var(--text-white) !important;
}

.card-header.bg-warning {
    background-color: var(--warning) !important;
    color: var(--text-dark) !important;
}

.card-header.bg-info {
    background-color: var(--info) !important;
    color: var(--text-white) !important;
}