:root {
  --cat-painting: #ffae67;
  --cat-sculpture: #d98b00;
  --cat-architecture: #f1d500;
  --cat-music: #ff99d1;
  --cat-literature: #9bc700;
  --cat-poetry: #54bbff;
  --cat-cinema: #9d9eff;
  --cat-photography: #858585;
  --cat-painting-soft: color-mix(in oklab, var(--cat-painting) 14%, transparent);
  --cat-sculpture-soft: color-mix(in oklab, var(--cat-sculpture) 14%, transparent);
  --cat-architecture-soft: color-mix(in oklab, var(--cat-architecture) 14%, transparent);
  --cat-music-soft: color-mix(in oklab, var(--cat-music) 14%, transparent);
  --cat-literature-soft: color-mix(in oklab, var(--cat-literature) 14%, transparent);
  --cat-poetry-soft: color-mix(in oklab, var(--cat-poetry) 14%, transparent);
  --cat-cinema-soft: color-mix(in oklab, var(--cat-cinema) 14%, transparent);
  --cat-photography-soft: color-mix(in oklab, var(--cat-photography) 14%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat-painting: #ffa617;
    --cat-sculpture: #e9aa00;
    --cat-architecture: #eede00;
    --cat-music: #f8baff;
    --cat-literature: #b1e600;
    --cat-poetry: #47bfff;
    --cat-cinema: #baa6ff;
    --cat-photography: #adadad;
  }
}

:root[data-theme="dark"] {
  --cat-painting: #ffa617;
  --cat-sculpture: #e9aa00;
  --cat-architecture: #eede00;
  --cat-music: #f8baff;
  --cat-literature: #b1e600;
  --cat-poetry: #47bfff;
  --cat-cinema: #baa6ff;
  --cat-photography: #adadad;
}