/**
 * Shared, reusable component vocabulary -- see dfusionfw/docs/css-conventions.md
 * §3/§4. A class with no page/feature prefix is shared vocabulary and
 * belongs here, not in a page-specific stylesheet.
 */
@layer components {
    /* --- Card --- */
    .card {
        background-color: var(--color-ui-0);
        border-radius: var(--radius-m);
        box-shadow: var(--shadow-card);
        padding: var(--spacing-s4);
    }

    .card-heading {
        font-size: var(--font-size-m);
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        color: var(--text-colour-regular);
        margin-bottom: var(--spacing-s2);
    }

    /* --- Badge --- */
    .badge {
        display: inline-block;
        padding: 1px var(--spacing-s2);
        border-radius: var(--radius-s);
        background: var(--color-ui-100);
        color: var(--text-colour-regular);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
    }
}