@utility card-* {
    background-color: --value(--color-*);
    color: --value(--color-bg-*);

    .card-header,
    .card-footer {
        background-color: --value(--color-*-700);
        color: --value(--color-bg-*);
        border-color: --value(--color-*-800);
    }

    .card-body {
        color: --value(--color-bg-*);
    }
}

@utility bg-card {
    background-color: --value(--color-white);

    @variant dark {
        background-color: --value(--color-gray-700);
    }
}

@utility border-card {
    border-width: --spacing(1);
    border-style: solid;
    border-color: --value(--color-gray-200);

    @variant dark {
        border-color: --value(--color-gray-700);
    }
}

@layer components {
    .card {
        @apply bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300;
        @apply rounded-lg border border-gray-200 dark:border-gray-700;
        @apply shadow-sm;
        @apply flex flex-col;
        @apply overflow-hidden;

        &.card-body {
            @apply flex-none;
            padding: var(--card-body-padding);
        }
    }

    .card-header {
        @apply flex-none;
        @apply px-3 py-1;
        @apply bg-gray-100 dark:bg-gray-800;
        @apply text-gray-600 dark:text-white;
        @apply border-b border-gray-200 dark:border-gray-700;
    }

    .card-title {
        @apply mb-0;
    }

    .card-body {
        @apply grow;
        @apply text-gray-700 dark:text-gray-300;
        padding: var(--card-body-padding);
    }

    .card-footer {
        @apply flex-none;
        @apply px-3 py-1;
        @apply bg-gray-100 dark:bg-gray-800;
        @apply text-gray-600 dark:text-white;
        @apply border-t border-gray-200 dark:border-gray-700;
    }
}