/* Solid colour panels. Each tone sets the surface, text, label and line colours its children read. */

.tone-green {
  --panel-bg: var(--green);
  --panel-fg: var(--ink);
  --panel-label: #0d4f31;
  --panel-line: rgba(12, 14, 19, 0.2);
}

.tone-violet {
  --panel-bg: var(--violet);
  --panel-fg: var(--ink);
  --panel-label: #1d1763;
  --panel-line: rgba(12, 14, 19, 0.2);
}

.tone-orange {
  --panel-bg: var(--orange);
  --panel-fg: var(--ink);
  --panel-label: #3a1004;
  --panel-line: rgba(12, 14, 19, 0.22);
}

.tone-yellow {
  --panel-bg: var(--yellow);
  --panel-fg: var(--ink);
  --panel-label: #5c3608;
  --panel-line: rgba(12, 14, 19, 0.2);
}

.tone-white {
  --panel-bg: var(--sheet);
  --panel-fg: var(--ink);
  --panel-label: var(--slate);
  --panel-line: var(--line);
}

/* Full-width colour sections */

.vivid {
  color: var(--ink);
  border-top: 0;
}

.vivid-green {
  background: var(--green);
}

.vivid-violet {
  background: var(--violet);
}

.vivid-orange {
  background: var(--orange);
}

.vivid + .section {
  border-top: 0;
}

.vivid .sub,
.vivid .note {
  color: var(--ink);
}

.vivid .cell {
  border-top-color: rgba(12, 14, 19, 0.28);
}

.vivid .button {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--sheet);
}

.vivid :focus-visible {
  outline-color: var(--ink);
}