:root {
    --card-padding: var(--gap);

    --card-border-radius: 10px;
    --card-border-width: 1px;
    --card-border-style: solid;

    --card-text-color: var(--zinc-800);
    --card-text-color-hover: var(--zinc-900);
    --card-background-color: var(--darker-20);
    --card-background-color-hover: white;
    --card-border-color: var(--zinc-600);
    --card-border-color-hover: var(--zinc-700);
}

/* ============================================================================ */

.card {
    padding: var(--card-padding);

    border-radius: var(--card-border-radius);
    border-width: var(--card-border-width);
    border-style: var(--card-border-style);

    color: var(--card-text-color);
    background-color: var(--card-background-color);
    border-color: var(--card-border-color);
}

.card-hover:hover,
.card-active:active {
    color: var(--card-text-color-hover);
    background-color: var(--card-background-color-hover);
    border-color: var(--card-border-color-hover);
}