/* Claymorphism micro-utility (clay.css structure).
   Apply `.clay` for surface recipe; set --clay-* on the element or theme.
   Layout/typography belong on extending classes — not here. */

.clay {
  background: var(--clay-background, rgba(0, 0, 0, 0.005));
  border-radius: var(--clay-border-radius, 1.5rem);
  box-shadow:
    var(--clay-shadow-outset, 8px 8px 16px 0 rgba(0, 0, 0, 0.22)),
    inset var(--clay-shadow-inset-primary, -6px -6px 12px 0 rgba(0, 0, 0, 0.18)),
    inset var(--clay-shadow-inset-secondary, 6px 6px 12px 0 rgba(255, 255, 255, 0.45));
}