.tone-purple{--tag-soft:#eee7fb;--tag-edge:#8554c7;--tag-ink:#51317d}
.tone-mint{--tag-soft:#e3f2e9;--tag-edge:#2e8b60;--tag-ink:#265d43}
.tone-yellow{--tag-soft:#fff3cf;--tag-edge:#c49a13;--tag-ink:#74570b}
.tone-coral{--tag-soft:#ffe0d4;--tag-edge:#e43b20;--tag-ink:#9b2f1b}
.tone-blue{--tag-soft:#e7edfc;--tag-edge:#416fd3;--tag-ink:#2e4f91}
.tone-untagged{--tag-edge:#d93822}
.swipe-task[class*="tone-"]>.row{border-left-color:var(--tag-edge)}
.chip[class*="tone-"]{background:var(--tag-soft);color:var(--tag-ink)}
nav button[data-filter][class*="tone-"]{background:var(--tag-soft);border-color:var(--tag-edge);color:var(--tag-ink)}
nav button[data-filter][class*="tone-"].active{box-shadow:inset 3px 0 var(--tag-edge);border-color:var(--tag-ink)}
.tag-color-options{border:0;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tag-color-options legend{font-weight:600;margin-bottom:12px}
.tag-color-options label{display:inline-flex;align-items:center;gap:7px;margin:0;padding:10px 14px;border:1px solid var(--tag-edge);border-radius:999px;background:var(--tag-soft);color:var(--tag-ink);cursor:pointer;transition:transform 180ms ease,box-shadow 180ms ease}
.tag-color-options input{margin:0;width:16px;height:16px;accent-color:var(--tag-ink)}
.tag-color-options label:has(input:checked){box-shadow:0 0 0 2px var(--tag-ink);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.tag-color-options label{transition:none}.tag-color-options label:has(input:checked){transform:none}}
.tagchoices label[class*="tone-"]{background:var(--tag-soft);color:var(--tag-ink);border:1px solid transparent}
.tagchoices label[class*="tone-"]:has(input:checked){background:var(--tag-soft);color:var(--tag-ink);border-color:var(--tag-edge)}
.tagchoices label[class*="tone-"] input{accent-color:var(--tag-ink)}
.tone-multi{--tag-soft:#e0f3f3;--tag-edge:#378f97;--tag-ink:#245e65}
.tone-rose{--tag-soft:#f7ddfa;--tag-edge:#c224c9;--tag-ink:#7f2187}
.tone-orange{--tag-soft:#fff0df;--tag-edge:#e47e24;--tag-ink:#8a4b14}
.tone-lime{--tag-soft:#f1e8df;--tag-edge:#916545;--tag-ink:#61432d}
.tone-cyan{--tag-soft:#f5f3ed;--tag-edge:#dedbd1;--tag-ink:#525664;--tag-outline:#9498a3}
.tone-slate{--tag-soft:#dedee3;--tag-edge:#171922;--tag-ink:#171922}
/* Compact tag indicators on tasks; navigation and editing retain names. */
.chip.tag-dot{display:inline-block;width:24px;height:24px;min-width:24px;padding:5px;border:0;border-radius:50%;background:var(--tag-edge);background-clip:content-box;position:relative;flex-shrink:0}
.tag-dot-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.chips:has(.tag-dot){align-items:center;gap:4px;min-height:24px}

/* A vivid swatch makes the ten choices easy to distinguish from their pastel fills. */
.tag-color-options label{font-size:12px}
.tag-color-options label span::before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--tag-edge);margin-right:6px;vertical-align:middle}
.tag-color-options input{accent-color:var(--tag-edge)}

/* White needs a visible outline on light surfaces. */
.tone-cyan .tag-dot-label{color:#525664}
.chip.tag-dot.tone-cyan{background:none;position:relative}
.chip.tag-dot.tone-cyan::before{content:'';position:absolute;inset:5px;border-radius:50%;background:#dedbd1;border:1.5px solid #9498a3}
#tasks .task-section>h2.tone-cyan>.section-tag-dot,.tag-color-options .tone-cyan span::before,#settingsPage .managed-tag-label.tone-cyan::before,.active-tag-filter.tone-cyan>.active-filter-dot{box-shadow:0 0 0 1px #9498a3}
.tag-color-options .tone-cyan input{accent-color:#525664}
#tasks .task-section>.swipe-task.tone-cyan>.row{box-shadow:inset 0 0 0 1px #e2e2eb}