/*
 * Each person's color, picked for the time of day. family-colors.js works out a light and a
 * dark version of every job, and the page sets them on the element that belongs to the
 * person with personStyle(). This file only chooses one, on that element, and its children
 * inherit it, so the switch at sunset needs no script. Stylesheets read:
 *   --c / --on-c        a ring, dot, swatch or filled tick, and the check or text on it
 *   --band / --on-band  a block in the person's color with text on it
 * Elsewhere they stay unset, so var(--c, fallback) falls back.
 */
[style*="--mark-light"] {
  --c: var(--mark-light);
  --on-c: var(--on-mark-light);
  --band: var(--band-light);
  --on-band: var(--on-band-light);
}
:root[data-theme="dark"] [style*="--mark-light"] {
  --c: var(--mark-dark);
  --on-c: var(--on-mark-dark);
  --band: var(--band-dark);
  --on-band: var(--on-band-dark);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [style*="--mark-light"] {
    --c: var(--mark-dark);
    --on-c: var(--on-mark-dark);
    --band: var(--band-dark);
    --on-band: var(--on-band-dark);
  }
}