.tf-card {
    background: var(--tf-card-bg);
    border: var(--tf-card-border);
    border-radius: var(--tf-card-radius);
    box-shadow: var(--tf-card-shadow);
    padding: var(--tf-space-4);
}

.tf-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tf-space-3);
    font-weight: var(--tf-font-weight-semibold);
    margin-bottom: var(--tf-space-3)
}

.tf-card-title {
    margin: 0;
    color: var(--tf-text-main);
    font-size: var(--tf-font-size-lg);
    font-weight: var(--tf-font-weight-semibold);
    line-height: var(--tf-line-height-heading);
}

.tf-card-body {
    color: var(--tf-text-main)
}

.tf-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tf-space-2);
    margin-top: var(--tf-space-4);
    padding-top: var(--tf-space-3);
    border-top: 1px solid var(--tf-border-color-light);
}