:root {
  /* Catppuccin Mocha — Rainbow Ordered */
  --chart-color-1: #f38ba8; /* red */
  --chart-color-2: #fab387; /* orange / peach */
  --chart-color-3: #f9e2af; /* yellow */
  --chart-color-4: #a6e3a1; /* green */
  --chart-color-5: #94e2d5; /* teal / cyan */
  --chart-color-6: #89b4fa; /* blue / sky */
  --chart-color-7: #cba6f7; /* violet / mauve */
  --chart-color-8: #f5c2e7; /* pink */
  --chart-color-9: #f5e0dc; /* rosewater (soft highlight) */

  /* Supporting colors */
  --chart-text: #cdd6f4;
  --chart-bg: #1e1e2e;
  --chart-surface: #11111b;

  /* RGBA transparent variants */
  --chart-color-1-rgba-12: rgba(243,139,168,0.12);
  --chart-color-2-rgba-12: rgba(250,179,135,0.12);
  --chart-color-3-rgba-12: rgba(249,226,175,0.12);
  --chart-color-4-rgba-12: rgba(166,227,161,0.12);
  --chart-color-5-rgba-12: rgba(148,226,213,0.12);
  --chart-color-6-rgba-12: rgba(137,180,250,0.12);
  --chart-color-7-rgba-12: rgba(203,166,247,0.12);
  --chart-color-8-rgba-12: rgba(245,194,231,0.12);
  --chart-color-9-rgba-12: rgba(245,224,220,0.12);

  --chart-color-1-rgba-30: rgba(243,139,168,0.30);
  --chart-color-2-rgba-30: rgba(250,179,135,0.30);
  --chart-color-3-rgba-30: rgba(249,226,175,0.30);
  --chart-color-4-rgba-30: rgba(166,227,161,0.30);
  --chart-color-5-rgba-30: rgba(148,226,213,0.30);
  --chart-color-6-rgba-30: rgba(137,180,250,0.30);
  --chart-color-7-rgba-30: rgba(203,166,247,0.30);
  --chart-color-8-rgba-30: rgba(245,194,231,0.30);
  --chart-color-9-rgba-30: rgba(245,224,220,0.30);
}

/* Optional styling */
.cm-chartjs-tooltip, .chartjs-tooltip, .cm-chartjs {
  color: var(--chart-text) !important;
}

.cm-chartjs-canvas-wrapper, .chartjs-wrapper {
  background: var(--chart-surface);
}