@layer components {
    .card {
        display: block;
        background-color: light-dark(
            oklch(95% 0% 0deg / 60%),
            oklch(50% 0% 0deg / 25%)
        );
        border-radius: 0.75rem;
        padding: 1rem;
        font-weight: inherit;
        box-shadow:
            0 1px 2px
                light-dark(oklch(0% 0% 0deg / 10%), oklch(0% 0% 0deg / 50%)),
            0 2px 4px
                light-dark(oklch(0% 0% 0deg / 10%), oklch(0% 0% 0deg / 50%));

        &.card--style-inset {
            margin-inline: var(--horizontal-safe-space);
            border-radius: 1.5rem;
            background-color: light-dark(
                oklch(100% 0 0deg),
                oklch(calc(0.2 + var(--elevation) * 0.07) 0.004 250deg)
            );
            box-shadow: none;
        }
    }
}