1/* Base component */
2.ui-card {
3  @apply rounded-xl border bg-white;
4}
5
6/* Modifier */
7.ui-elevated {
8  @apply shadow-lg;
9}
10
11/* Combination */
12.ui-card.ui-hoverable:hover {
13  @apply shadow-2xl -translate-y-1;
14}
15
16/* Parent → child interaction */
17.ui-card:hover .ui-header {
18  @apply text-blue-600;
19}