.color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin:2rem 0}.color-card{border-radius:.75rem;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:transform .3s ease}.color-card:hover{transform:translateY(-4px)}.color-card .color-swatch{height:100px}.color-card .color-info{padding:1rem;background:#fff}.color-card .color-info .color-name{font-weight:600;margin-bottom:.25rem}.color-card .color-info .color-variable{font-family:Monaco,Consolas,monospace;color:#666;font-size:.875rem;margin-bottom:.25rem}.color-card .color-info .color-value{font-family:Monaco,Consolas,monospace;color:#999;font-size:.875rem}.color-card.primary .color-swatch{background:var(--primary)}.color-card.secondary .color-swatch{background:var(--secondary)}.color-card.green .color-swatch{background:var(--ethio-green)}.color-card.yellow .color-swatch{background:var(--ethio-yellow)}.color-card.red .color-swatch{background:var(--ethio-red)}.color-card.blue .color-swatch{background:var(--ethio-blue)}