:root {
  --lch-white: 100% 0 0;
  --lch-dark-grey: 33.74% 0.0374 230.06;
  --lch-mid-grey: 60% 0.0374 230.06;
  --lch-light-grey: 90% 0.0374 230.06;
  --lch-coral: 77.45% 0.1198 38.63;
  --lch-blue: 55.87% 0.1125 246.64;

  --clr-slate: oklch(var(--lch-dark-grey));
  --clr-separators: oklch(var(--lch-light-grey));
  --clr-background: oklch(var(--lch-white));
  --clr-ink: oklch(var(--lch-dark-grey));
  --clr-ink-reversed: oklch(var(--lch-white));
  --clr-ink-muted: oklch(var(--lch-mid-grey));
  --clr-accent: oklch(var(--lch-blue));
  --clr-selected: oklch(var(--lch-coral));
  --clr-always-slate: oklch(var(--lch-dark-grey));
  --clr-always-white: oklch(var(--lch-white));
  --clr-subtle: oklch(var(--lch-light-grey) / 0.2);

  --clr-danger: crimson;
  --clr-success: green;
}

.color-ink {
  color: var(--clr-ink);
}

.color-ink-muted {
  color: var(--clr-ink-muted);
}

.color-ink-reversed {
  color: var(--clr-ink-reversed);
}

.color-always-white {
  color: var(--clr-always-white);
}

.color-danger {
  color: var(--clr-danger) !important;
}

.color-success {
  color: var(--clr-success) !important;
}

.color-selected {
  color: var(--clr-selected);
}