/* Mapeamento data-accent → --accent + estado ativo dos swatches */

html[data-accent="blue"]    { --accent: #099AD7; }
html[data-accent="indigo"]  { --accent: #4f46e5; }
html[data-accent="violet"]  { --accent: #7c3aed; }
html[data-accent="cyan"]    { --accent: #0891b2; }
html[data-accent="teal"]    { --accent: #0d9488; }
html[data-accent="emerald"] { --accent: #059669; }
html[data-accent="slate"]   { --accent: #475569; }
html[data-accent="red"]     { --accent: #c0392b; }

/* Active state — CSS driven, reage ao data-accent sem JS de classe */
html[data-accent="blue"]    .accent-swatch[data-key="blue"]
  { outline: 2px solid white; outline-offset: 2px; box-shadow: 0 0 0 4px #099AD7; }
html[data-accent="indigo"]  .accent-swatch[data-key="indigo"]
  { outline: 2px solid white; outline-offset: 2px; box-shadow: 0 0 0 4px #4f46e5; }
html[data-accent="violet"]  .accent-swatch[data-key="violet"]
  { outline: 2px solid white; outline-offset: 2px; box-shadow: 0 0 0 4px #7c3aed; }
html[data-accent="cyan"]    .accent-swatch[data-key="cyan"]
  { outline: 2px solid white; outline-offset: 2px; box-shadow: 0 0 0 4px #0891b2; }
html[data-accent="teal"]    .accent-swatch[data-key="teal"]
  { outline: 2px solid white; outline-offset: 2px; box-shadow: 0 0 0 4px #0d9488; }
html[data-accent="emerald"] .accent-swatch[data-key="emerald"]
  { outline: 2px solid white; outline-offset: 2px; box-shadow: 0 0 0 4px #059669; }
html[data-accent="slate"]   .accent-swatch[data-key="slate"]
  { outline: 2px solid white; outline-offset: 2px; box-shadow: 0 0 0 4px #475569; }
html[data-accent="red"]     .accent-swatch[data-key="red"]
  { outline: 2px solid white; outline-offset: 2px; box-shadow: 0 0 0 4px #c0392b; }