claymorphism

# Claymorphism Design Spec ## 3 Core Elements 1. **Large Radius** — Generous `border-radius` (20–50px) for a puffy, inflated look 2. **Dual Inner Shadows** — Light inset from top-left + dark inset from bottom-right to simulate 3D clay surface 3. **Offset Outer Shadow** — Directional `box-shadow` offset (not centered) to ground the element ## CSS Tokens Reference: [references/tokens.css](references/tokens.css) ```css @import 'references/tokens.css'; .clay-card { background: var(--clay-bg-card); border-radius: var(--clay-radius-lg); box-shadow: var(--clay-shadow); color: var(--clay-text); } ``` ## Component Examples ### Card ```css .clay-card { background: var(--clay-bg-card); border-radius: var(--clay-radius-lg); box-shadow: var(--clay-shadow); padding: 1.5rem; color: var(--clay-text); } ``` ### Button ```css .clay-btn { background: var(--clay-bg-button); border: none; border-radius: var(--clay-radius-pill); box-shadow: var(--clay-shadow); padding: 0.75rem 1.5rem; color: var(--clay-text); cursor: pointer; transition: box-shadow 0.2s; } .clay-btn:hover { box-shadow: var(--clay-shadow-elevated); } .clay-btn:active { box-shadow: var(--clay-shadow-pressed); } ``` ### Input ```css .clay-input { background: var(--clay-bg); border: none; border-radius: var(--clay-radius); box-shadow: var(--clay-shadow-pressed); padding: 0.75rem 1rem; color: var(--clay-text); } .clay-input:focus { outline: 2px solid var(--clay-accent); ou...