Color Schemes

<!-- Color Schemes — accent picker -->
<div class="nuda-schemes">
  <button class="nuda-schemes__sw is-active"
          style="background: linear-gradient(135deg, #e4ff54, #a8c93a)"
          aria-label="Lime"></button>
  <button class="nuda-schemes__sw"
          style="background: linear-gradient(135deg, #a78bfa, #8b5cf6)"
          aria-label="Violet"></button>
  <button class="nuda-schemes__sw"
          style="background: linear-gradient(135deg, #fb7185, #e11d48)"
          aria-label="Rose"></button>
  <button class="nuda-schemes__sw"
          style="background: linear-gradient(135deg, #38bdf8, #0284c7)"
          aria-label="Sky"></button>
  <button class="nuda-schemes__sw"
          style="background: linear-gradient(135deg, #fbbf24, #d97706)"
          aria-label="Amber"></button>
</div>

/* Color Schemes
   Round swatches; .is-active gets a ring matching its accent.
   Customize: per-swatch gradients via inline background. */

.nuda-schemes {
  display: inline-flex;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.nuda-schemes__sw {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
  flex-shrink: 0;
}

.nuda-schemes__sw:hover { transform: scale(1.15); }

.nuda-schemes__sw.is-active {
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.6),
    0 0 0 4px currentColor;
}

/* Set color: per-swatch from JS or pick a default for the active state */
.nuda-schemes__sw:nth-child(1).is-active { color: #e4ff54; }
.nuda-schemes__sw:nth-child(2).is-active { color: #a78bfa; }
.nuda-schemes__sw:nth-child(3).is-active { color: #fb7185; }
.nuda-schemes__sw:nth-child(4).is-active { color: #38bdf8; }
.nuda-schemes__sw:nth-child(5).is-active { color: #fbbf24; }

.nuda-schemes__sw::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
}