.card {
    --card-padding: var(--size-3); /* Using design system spacing */
    border-radius: var(--radius-medium); /* MD3 uses 12dp medium radius */
    padding: var(--card-padding);
    background-color: var(--layer-surface);
    box-shadow: var(--elevation-1);
    transition: box-shadow 0.2s var(--ease-standard); /* MD3 standard easing */
    position: relative;
    margin-bottom: var(--size-3);
    /* display: flow-root; */

    &.surface {
        background-color: var(--layer-surface);
    }

    /* Clickable/Interactive state */
    &.clickable {
        cursor: pointer;

        &:hover {
            box-shadow: var(--elevation-2);
            background-color: var(--layer-surface-container);
        }

        &:active {
            box-shadow: var(--elevation-1);
            background-color: var(--layer-surface-container);
        }
    }

    /* Outlined variant */
    &.outlined {
        box-shadow: none;
        border: 1px solid var(--outline-variant);
        background-color: var(--layer-surface);
    }

    /* Filled variant */
    &.filled {
        background-color: var(--layer-surface-container);
        box-shadow: none;
    }
    &.primary {
        background-color: var(--primary);
        color: var(--on-primary);
    }
    &.highlighted {
        background-color: rgb(from var(--yellow-chip) r g b / 0.25) !important;
    }
    &.highlighted.outlined {
        background-color: rgb(from var(--yellow-chip) r g b / 0.25) !important;
        border: 1px solid rgb(from var(--yellow-chip) r g b / 0.5) !important;
    }
    &.helping {
        background-color: rgb(from var(--blue-chip) r g b / 0.15) !important;
    }
    &.helping.outlined {
        background-color: rgb(from var(--blue-chip) r g b / 0.15) !important;
        border: 1px solid rgb(from var(--blue-chip) r g b / 0.5);
    }
    &.speaking {
        background-color: rgb(from var(--green-chip) r g b / 0.15) !important;
    }
    &.speaking.outlined {
        background-color: rgb(from var(--green-chip) r g b / 0.15) !important;
        border: 1px solid rgb(from var(--green-chip) r g b / 0.5) !important;
    }

    /* Elevated variant */
    &.elevated {
        box-shadow: var(--elevation-2);
        background-color: var(--layer-surface-container);
    }

    /* Card sections */
    .card-header {
        display: flex;
        gap: var(--size-3);
        align-items: center;
        margin-block-end: var(--size-3);
        padding-block: var(--size-2);
    }

    .card-content {
        margin-block: var(--size-3);
    }

    .card-footer {
        display: flex;
        justify-content: flex-end;
        gap: var(--size-2);
        margin-block-start: var(--size-3);
        padding-block-start: var(--size-2);
    }

    /* Density variants */
    &.compact {
        --card-padding: var(--size-2);

        .card-header {
            margin-block-end: var(--size-2);
        }

        .card-content {
            margin-block: var(--size-2);
        }

        .card-footer {
            margin-block-start: var(--size-2);
        }
    }

    &.spacious {
        --card-padding: var(--size-4);

        .card-header {
            margin-block-end: var(--size-4);
        }

        .card-content {
            margin-block: var(--size-4);
        }

        .card-footer {
            margin-block-start: var(--size-4);
        }
    }
}