/* ============================================
   SIA DESIGN CENTER — Card Component v0.1.0
   ============================================ */

.sia-card {
    background: var(--sia-bg-surface);
    border: var(--sia-border-width) solid var(--sia-border-color);
    border-radius: var(--sia-radius-xl);
    padding: var(--sia-space-6);
    box-shadow: var(--sia-shadow-sm);
    transition: all var(--sia-transition-normal);
}

.sia-card:hover {
    border-color: var(--sia-border-hover);
    box-shadow: var(--sia-shadow-md);
    transform: translateY(-2px);
}

.sia-card-header {
    font-size: var(--sia-text-lg);
    font-weight: var(--sia-weight-semibold);
    color: var(--sia-text-primary);
    margin-bottom: var(--sia-space-2);
    letter-spacing: var(--sia-tracking-tight);
}

.sia-card-body {
    color: var(--sia-text-secondary);
    font-size: var(--sia-text-sm);
    line-height: var(--sia-leading-relaxed);
}

.sia-card-footer {
    margin-top: var(--sia-space-4);
    padding-top: var(--sia-space-4);
    border-top: var(--sia-border-width) solid var(--sia-border-color);
}

/* Card variants */
.sia-card-compact {
    padding: var(--sia-space-4);
}

.sia-card-interactive {
    cursor: pointer;
}

.sia-card-interactive:hover {
    border-color: var(--sia-primary);
    box-shadow: var(--sia-shadow-lg);
}