/* One hue drives the interface palette. Semantic status colours stay separate. */
:root {
  --paco-blue-hue:218;
  --paco-red:#E2231A;
  --paco-red-hue:2.7;
  --paco-hue:var(--paco-blue-hue);
  --paco-accent:hsl(var(--paco-hue) 60% 47%);
  --paco-accent-strong:hsl(var(--paco-hue) 62% 38%);
  --paco-accent-text:hsl(var(--paco-hue) 48% 43%);
  --paco-accent-muted:hsl(var(--paco-hue) 28% 43%);
  --paco-accent-soft:hsl(var(--paco-hue) 78% 96%);
  --paco-accent-hover:hsl(var(--paco-hue) 72% 93%);
  --paco-accent-selected:hsl(var(--paco-hue) 72% 90%);
  --paco-accent-border:hsl(var(--paco-hue) 55% 78%);
  --paco-accent-ring:hsl(var(--paco-hue) 55% 62%);
  --paco-accent-code:hsl(var(--paco-hue) 28% 95%);
  --paco-accent-faint:hsl(var(--paco-hue) 45% 98%);
  --paco-accent-on-dark:hsl(var(--paco-hue) 85% 79%);
}
:root[data-accent=red]{--paco-hue:var(--paco-red-hue);--paco-accent:var(--paco-red)}
.paco-accent-options{display:flex;gap:12px;border:0;padding:0;margin:22px 0}
.paco-accent-options legend{font-size:13px;font-weight:600;margin-bottom:10px}
.paco-dialog button.paco-accent-choice{display:grid;place-items:center;width:44px;height:44px;padding:5px;border:2px solid transparent;border-radius:50%;background:transparent}
.paco-accent-choice span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--paco-accent);color:white}
.paco-accent-choice[data-color=blue]{--paco-accent:hsl(var(--paco-blue-hue) 60% 47%)}
.paco-accent-choice[data-color=red]{--paco-accent:var(--paco-red)}
.paco-dialog button.paco-accent-choice[aria-pressed=true]{border-color:var(--paco-accent)}
.paco-accent-choice[aria-pressed=false] svg{visibility:hidden}
.paco-dialog button:focus-visible{outline:2px solid var(--paco-accent);outline-offset:3px}