@layer components {
  .ui-card {
    background-color: var(--surface-light);
    border-radius: var(--radius);
    padding: 0.75rem;
    transition: transform var(--transition-fast);

    &:hover {
      transform: translateY(-2px);
    }
  }

  .ui-box {
    background-color: var(--surface-light);
    border-radius: var(--radius);

    > * {
      --radius-child: calc(var(--radius) - var(--padding-inline));
    }
  }
}