/* ══════════════════════════════════════════════════════════════════════════
   Accent colour (Settings > Personalization). Loaded right after tokens.css.

   Rule (Alex, 2026-10-13): the accent is for links, highlights and SELECTED
   states only — never profit/loss green/red, never status dots, warnings or
   errors. Primary buttons stay monotone (text-coloured).

   <html data-accent="violet|cyan|fuchsia|graphite"> is set before first paint by
   the head script on every page (localStorage soda_accent, known keys only).
   Blue is the default: no attribute, the values come from tokens.css.

   Every accent passes WCAG AA (>= 4.5:1) as text on --ds-bg, --ds-surface and
   --ds-hover in its theme, and --ds-on-accent passes >= 4.5:1 on an accent fill
   (numbers in the 2026-10-13 accent picker report).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Selection tokens: every selected / active state reads these ── */
:root {
  --ds-on-accent:    #141417;               /* text on an accent fill (dark) */
  --ds-sel-fill:     var(--ds-accent);      /* filled chips, segments, toggles ON, checkboxes */
  --ds-on-sel-fill:  var(--ds-on-accent);   /* text / knob on that fill */
  --ds-sel-fg:       var(--ds-accent);      /* selected tab text + underline, active nav item */
  --ds-sel-bg:       var(--ds-accent-soft); /* tint behind an active nav item / selected card */
  --ds-sel-border:   var(--ds-accent);      /* outline of a selected card */

  /* Picker swatches: each accent in the CURRENT theme */
  --ds-swatch-blue:     #7C9CFF;
  --ds-swatch-violet:   #B39DFF;
  --ds-swatch-cyan:     #4CC9E4;
  --ds-swatch-fuchsia:  #EE82E0;
  --ds-swatch-graphite: var(--ds-text);
}
:root[data-theme="light"] {
  --ds-on-accent:       #FFFFFF;
  --ds-swatch-blue:     #3550C8;
  --ds-swatch-violet:   #6B3FCF;
  --ds-swatch-cyan:     #0A6A84;
  --ds-swatch-fuchsia:  #A3239A;
}

/* ── Accents (dark, then light) ── */
:root[data-accent="violet"]  { --ds-accent: #B39DFF; --ds-accent-soft: rgba(179, 157, 255, .14); }
:root[data-accent="cyan"]    { --ds-accent: #4CC9E4; --ds-accent-soft: rgba(76, 201, 228, .14); }
:root[data-accent="fuchsia"] { --ds-accent: #EE82E0; --ds-accent-soft: rgba(238, 130, 224, .14); }
:root[data-theme="light"][data-accent="violet"]  { --ds-accent: #6B3FCF; --ds-accent-soft: rgba(107, 63, 207, .10); }
:root[data-theme="light"][data-accent="cyan"]    { --ds-accent: #0A6A84; --ds-accent-soft: rgba(10, 106, 132, .10); }
:root[data-theme="light"][data-accent="fuchsia"] { --ds-accent: #A3239A; --ds-accent-soft: rgba(163, 35, 154, .10); }

/* Graphite = monotone: accent is the text colour, so selected states look exactly
   like the pre-accent design (text-coloured fills, hover-grey nav tint). */
:root[data-accent="graphite"] {
  --ds-accent:      var(--ds-text);
  --ds-accent-soft: color-mix(in srgb, var(--ds-text) 10%, transparent);
  --ds-on-accent:   var(--ds-on-primary);
  --ds-sel-bg:      var(--ds-hover);
}
/* Graphite links are text-coloured, so they are underlined to stay recognisable. */
:root[data-accent="graphite"] a:not([class]):not([style*="background"]),
:root[data-accent="graphite"] a[style*="--ds-accent"] {
  text-decoration: underline !important; text-underline-offset: 2px;
}

/* Native checkboxes / radios / sliders: checked = the accent. */
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--ds-sel-fill); }

/* ── Picker: a row of round swatches (Settings > Personalization) ──
   Each is a 44px <button>; the visible dot sits inside. Selected = a ring in
   the text colour around the dot. */
.accent-swatches { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 4px; margin: 4px 0 0 -6px; }
#accent-row > div:first-child { padding-right: 16px; }
.accent-swatch {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  width: var(--ds-tap); height: var(--ds-tap); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.accent-swatch-dot {
  width: 26px; height: 26px; border-radius: 50%; display: block;
  box-shadow: 0 0 0 2px var(--ds-surface), 0 0 0 3px var(--ds-border);
  transition: box-shadow .15s;
}
.accent-swatch:hover .accent-swatch-dot { box-shadow: 0 0 0 2px var(--ds-surface), 0 0 0 3px var(--ds-border-strong); }
.accent-swatch[aria-pressed="true"] .accent-swatch-dot { box-shadow: 0 0 0 2px var(--ds-surface), 0 0 0 4px var(--ds-text); }
.accent-swatch:focus-visible { outline: none; }
.accent-swatch:focus-visible .accent-swatch-dot { box-shadow: 0 0 0 2px var(--ds-surface), 0 0 0 4px var(--ds-accent), 0 0 0 6px var(--ds-surface); }
.accent-swatch[data-accent-key="blue"]     .accent-swatch-dot { background: var(--ds-swatch-blue); }
.accent-swatch[data-accent-key="violet"]   .accent-swatch-dot { background: var(--ds-swatch-violet); }
.accent-swatch[data-accent-key="cyan"]     .accent-swatch-dot { background: var(--ds-swatch-cyan); }
.accent-swatch[data-accent-key="fuchsia"]  .accent-swatch-dot { background: var(--ds-swatch-fuchsia); }
.accent-swatch[data-accent-key="graphite"] .accent-swatch-dot { background: var(--ds-swatch-graphite); }