/**
 * Wapu UI Kit · wapu-swatch
 *
 * Color swatch — preview circular o cuadrado de un color del drop.
 * Útil para:
 *   - Preview de drops en el selector ("Tema")
 *   - Indicadores de tono (dark/light/soft/accent)
 *   - Color picker en estilos del inspector
 *
 * Reemplaza:
 *   - .pg-swatch-grid / .pg-swatch-grid__chip (Playground legacy)
 *   - inline color preview en cards
 *
 * Variantes BEM:  --light, --dark, --soft, --accent (presets de tono)
 * Tamaños:        --sm (16px), --md (24px default), --lg (40px)
 * Forma:          --square (default rounded-circle si no se especifica)
 *
 * Tokens:
 *   --wapu-swatch-color   (color principal, default currentColor)
 *
 * @package WapuCore
 * @since   5.7.0
 */

/* ── Base ───────────────────────────────────────────────────────── */
.wapu-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--wapu-swatch-color, currentColor);
    border: 1px solid rgba(15, 23, 42, .08);
    flex-shrink: 0;
    vertical-align: middle;
}

/* ── Sizes ──────────────────────────────────────────────────────── */
.wapu-swatch--sm { width: 16px; height: 16px; }
.wapu-swatch--md { width: 24px; height: 24px; }
.wapu-swatch--lg { width: 40px; height: 40px; }

/* ── Shape ──────────────────────────────────────────────────────── */
.wapu-swatch--square { border-radius: 6px; }

/* ── Tone presets (chips visuales del drop) ─────────────────────── */
.wapu-swatch--light  { background: #fdfbf5; border-color: rgba(15, 23, 42, .12); }
.wapu-swatch--dark   { background: #1a1a1a; border-color: rgba(255, 255, 255, .08); }
.wapu-swatch--soft   { background: #f5f3ec; border-color: rgba(15, 23, 42, .08); }
.wapu-swatch--accent { background: var(--wapu-swatch-color, #9B1D4D); border-color: transparent; }

/* ── Trio · multi-color preview (typical para drop cards) ───────── */
.wapu-swatch-trio {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

/* ── Grid de selección ─────────────────────────────────────────── */
.wapu-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 8px;
}
.wapu-swatch-grid__option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    font-family: inherit;
}
.wapu-swatch-grid__option:hover {
    background: rgba(15, 23, 42, .04);
}
.wapu-swatch-grid__option[aria-pressed="true"],
.wapu-swatch-grid__option.is-active {
    border-color: rgba(15, 23, 42, .28);
    background: rgba(15, 23, 42, .04);
}
.wapu-swatch-grid__label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(15, 23, 42, .65);
    letter-spacing: 0.04em;
}

/* ── Disabled ───────────────────────────────────────────────────── */
.wapu-swatch[aria-disabled="true"],
.wapu-swatch-grid__option:disabled {
    opacity: .4;
    cursor: not-allowed;
}