.swatch-graphite{background:linear-gradient(135deg,#555,#dedede)}
.swatch-light{background:#4d6bfe;box-shadow:0 0 0 2px #e5ebff}
.swatch-aurora{background:linear-gradient(135deg,#76d9ff,#ad8cff)}
.swatch-green{background:#c4ff63}
.swatch-tide{background:linear-gradient(135deg,#155563,#a2e9d6);box-shadow:0 0 0 1px #dfc59b66}
.swatch-lunar{background:linear-gradient(135deg,#d7cff1,#8062b4,#b58fa7);box-shadow:0 0 0 1px #6550bf22}
.swatch-obsidian{background:linear-gradient(135deg,#18191b,#dcc399);box-shadow:0 0 0 1px #dcc39944}
.swatch-polar{background:linear-gradient(135deg,#f1f4f8,#315c9e);box-shadow:0 0 0 1px #c9d5e5}
.swatch-ember{background:linear-gradient(135deg,#110e11,#ff7a88);box-shadow:0 0 0 1px #5e343f}
.swatch-emerald{background:linear-gradient(135deg,#0d1714,#b1d399);box-shadow:0 0 0 1px #485d43}
.swatch-sunset{background:linear-gradient(135deg,#fff6ef,#a94725);box-shadow:0 0 0 1px #e9c5ae}
.swatch-indigo{background:linear-gradient(135deg,#10142b,#a7b9ff);box-shadow:0 0 0 1px #4a598c}
.swatch-sandstone{background:linear-gradient(135deg,#f2ede4,#765538);box-shadow:0 0 0 1px #d3c6b2}
.swatch-glacier{background:linear-gradient(135deg,#eef8f8,#176775);box-shadow:0 0 0 1px #b9d8dd}
.swatch-cyber{background:linear-gradient(135deg,#130b20,#ff8bdf);box-shadow:0 0 0 1px #7a3b80}

/* Icon-only theme controls: names stay available on hover and to screen readers. */
.colorway-chooser{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px;border-top:1px solid var(--line);padding:14px 0;color:var(--muted)}
.colorway-chooser button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;cursor:pointer}
.colorway-chooser button[aria-pressed=true],.colorway-chooser button:hover{border:0;background:transparent;box-shadow:none}
.colorway-chooser i{display:block;flex-shrink:0;width:16px;height:16px;border-radius:50%;transition:transform .15s ease}
.colorway-chooser button:hover i{transform:scale(1.12)}
.colorway-chooser button[aria-pressed=true] i{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--lime)}
.colorway-chooser button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
@media(pointer:coarse){.colorway-chooser{gap:2px}.colorway-chooser button{flex-basis:44px;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.colorway-chooser i{transition:none}}