/* tools/color.css */

.color-swatch {
    width: 100%; height: 140px;
    border-radius: 0.75rem;
    transition: background-color 0.15s ease;
    border: 1px solid #e2e8f0;
}
.color-row {
    display: flex; align-items: center; gap: 0.5rem;
}
.color-row label {
    font-size: 0.75rem; color: #64748b;
    width: 3rem; flex-shrink: 0;
}
.color-row input[type="text"] {
    flex: 1; padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0; border-radius: 0.5rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875rem; outline: none;
    transition: border-color 0.2s;
}
.color-row input[type="text"]:focus { border-color: #f43f5e; }
.color-row input[readonly] { background: #f8fafc; }
.copy-icon {
    color: #94a3b8; cursor: pointer;
    transition: color 0.2s; flex-shrink: 0;
}
.copy-icon:hover { color: #475569; }
.palette-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.5rem;
}
.palette-dot {
    width: 100%; aspect-ratio: 1;
    border-radius: 0.5rem; cursor: pointer;
    border: 1px solid rgba(0,0,0,0.06);
    transition: transform 0.15s;
}
.palette-dot:hover { transform: scale(1.15); }
.shades-bar {
    display: flex;
    border-radius: 0.5rem;
    overflow: hidden;
    height: 2.5rem;
}
.shade-seg {
    flex: 1; cursor: pointer;
    transition: flex 0.2s ease;
}
.shade-seg:hover { flex: 2; }