/*contains styles that are always present.*/
:root {
  --sudoku-accent-blue: oklch(0.85 0.25 270);
  --sudoku-accent-teal: oklch(0.85 0.25 215);
  --sudoku-accent-green: oklch(0.85 0.25 145);
  --sudoku-accent-yellow: oklch(0.85 0.25 100);
  --sudoku-accent-orange: oklch(0.85 0.25 60);
  --sudoku-accent-red: oklch(0.85 0.25 20);
  --sudoku-accent-pink: oklch(0.85 0.25 345);
  --sudoku-accent-purple: oklch(0.85 0.25 300);
  --sudoku-accent-slate: oklch(0.85 0.05 250);
}
grid.board {
  border: 2px solid #333;
  background: #333;
}
grid.block {
  background: #999;
}
sudokucell {
  background: var(--view-bg-color);
}
sudokucell > label {
  color: var(--view-fg-color);
}
sudokucell.selected {
  background: var(--sudoku-accent-color);
}
sudokucell.highlight-coord {
  background: oklch(from var(--sudoku-accent-color) 0.9 calc(c * 0.25) h);
}
sudokucell.highlight-number {
  background: oklch(from var(--sudoku-accent-color) 0.75 c h);
}
sudokucell > label.earmark.highlight-number {
  /* reduce red to diffentiate from warnings */
  color: oklab(from var(--accent-color) l min(a, 0.1) b);
  font-weight: bold;
}
sudokucell > label.error {
  color: var(--error-color);
  font-weight: bold;
}
sudokucell.fixed {
  background: #CCC;
}
overlay.paused > label {
  background: rgba(0, 0, 0, 0.75);
  font-weight: bold;
  color: #FFF;
}
sudokucell.paused {
  background: #FFF;
}
sudokucell.paused > label {
  color: transparent;
}
