@import url('../colors_and_type.css');
html, body { margin:0; padding:0; background: #FAFAFB; font-family: var(--font-sans); color: var(--fg-1); }
body {  box-sizing: border-box; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.col { display:flex; flex-direction:column; gap:12px; }
.swatch { width:100%; height:64px; border-radius:8px; box-shadow: var(--shadow-card); }
.sw-card { flex:1; min-width:100px; background: var(--white); border-radius:10px; overflow:hidden; box-shadow: var(--shadow-card); font-size:11px; }
.sw-card .fill { height: 52px; }
.sw-card .meta { padding: 8px 10px; }
.sw-card .name { font-weight: 600; font-size: 12px; color: var(--fg-1); }
.sw-card .hex  { color: var(--fg-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-2); font-size: 11px; }