:root {
    /* musical interval */
    --semitone: #5ad17a;
    --whole: #ffb454;
    --minor3rd: #7fc8ff;
    --major3rd: #d8fe4c;
    --p4p5: #c792ea;
    --tritone: #ff5d6c;

    /* harmonic-function colors */
    --tonic-color: #49b656;
    --subdominant-color: #f1ab31;
    --dominant-color: #f15031;
    --pseudotonic-color: #2CB28C;

    --subdominant-minor-color: #987f43;
    --pseudotonic-minor-color: #5A6958;
    --dominant-minor-color: #C2380A;

    /* accessible mode */
    --accessible-tonic-color: #4096ff;
    --accessible-subdominant-color: #F1AB31;
    --accessible-dominant-color: #5701e1;
}

/* opt-in accessible mode: remap the function colors everywhere CSS uses them */
body.accessible {
    --tonic-color: var(--accessible-tonic-color);
    --subdominant-color: var(--accessible-subdominant-color);
    --dominant-color: var(--accessible-dominant-color);
}

.note {
  --theta: calc(var(--n) * 30deg);

  /* normal mode */
  background: oklch(70% 0.12 var(--theta));
}

:root:has(#tAccessible:checked) .note {
  --theta: calc(var(--n) * 30deg);

  /* red-green-safe cyclic loop */
  background: oklab(
    calc(67.5% + 18% * cos(var(--theta)))
    0
    calc(0.13 * sin(var(--theta)))
  );
}

.note-text {
  --theta: calc(var(--n) * 30deg);

  /* normal mode */
  color: oklch(70% 0.12 var(--theta));
}

:root:has(#tAccessible:checked) .note-text {
  --theta: calc(var(--n) * 30deg);

  /* red-green-safe cyclic loop */
  color: oklab(
    calc(67.5% + 18% * cos(var(--theta)))
    0
    calc(0.13 * sin(var(--theta)))
  );
}