/* ════════════════════════════════════════════════════════════════════════
   zColor_demo.css — a ONE-OFF reskinned color picker (opt in: zBrush [page, leaf, demo.zColor_demo]).
   Proof of how far a `type: color` field reskins through your OWN class on the canonical
   surface — here a big glowing swatch tile. _zClass: swatch-tile lands on the field wrapper;
   the swatch frame is token-driven (zbase reads --zswatch-size / --zswatch-radius /
   --zswatch-shadow / --zswatch-gloss), so just setting those vars on the wrapper cascades to
   the native chip — no specificity battle. Scoped to .swatch-tile so it touches NOTHING else.
   Bifrost-only — the terminal just takes a hex code.
   ════════════════════════════════════════════════════════════════════════ */

/* the zbase swatch tokens (SSOT) — set them on the wrapper and they cascade to the chip:
   a large rounded-square tile with a soft ring, a neon lift on hover, and a glossy face */
.swatch-tile {
    --zswatch-size:         5rem;
    --zswatch-radius:       20px;
    --zswatch-shadow:       0 0 0 2px rgba(255, 255, 255, 0.10), 0 10px 28px rgba(0, 0, 0, 0.5);
    --zswatch-shadow-hover: 0 0 0 2px rgba(92, 169, 255, 0.7), 0 0 26px rgba(92, 169, 255, 0.6);
    --zswatch-gloss:        inset 0 3px 8px rgba(255, 255, 255, 0.45), inset 0 -4px 10px rgba(0, 0, 0, 0.22);
    margin-bottom: 1.6rem;
}

/* the label — a small accent tag sitting above the tile */
.swatch-tile .zLabel {
    display:        block;
    margin-bottom:  0.5rem;
    color:          #5ca9ff;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size:      0.72rem;
}