@import url('/assets/css/main.css');

.swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:.8rem;margin-top:1.2rem}
.swatch{border-radius:12px;overflow:hidden;border:1px solid var(--line);cursor:pointer;transition:transform .15s,box-shadow .15s;background:var(--bg-soft)}
.swatch:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.swatch .sw-color{height:88px}
.swatch .sw-hex{padding:.5rem .3rem;font-size:.82rem;font-weight:600;text-align:center;font-family:ui-monospace,monospace}

.var-name{font-size:.72rem;color:var(--muted);font-family:ui-monospace,monospace;margin-top:.2rem}