/* Color tokens */
:root {
  --panel: #fff;
  --today: #f83;
  --ink: #222;
  --strong: #000;
  --muted: #888;
  --weekend: #888;
  --firstday: #000;
  --select: #aaf;
  --shadow: #fff;
  --label-bg: #fafbfe;
  --label-bg-rgb: 250, 251, 254;
}

/* Month tints (light) */
.dec { background: hsl(220 50% 95%) }
.jan { background: hsl(220 50% 92%) }
.feb { background: hsl(220 50% 95%) }
.mar { background: hsl(125 60% 92%) }
.apr { background: hsl(125 60% 95%) }
.may { background: hsl(125 60% 92%) }
.jun { background: hsl(45 85% 95%) }
.jul { background: hsl(45 85% 92%) }
.aug { background: hsl(45 85% 95%) }
.sep { background: hsl(18 78% 92%) }
.oct { background: hsl(18 78% 95%) }
.nov { background: hsl(18 78% 92%) }

/* Light mode — gray shades and colors */
.event-color-0 { background: hsl(0, 0%, 85%) }  /* lightest grey */
.event-color-1 { background: hsl(0, 0%, 75%) }  /* light grey */
.event-color-2 { background: hsl(0, 0%, 65%) }  /* medium grey */
.event-color-3 { background: hsl(0, 0%, 55%) }  /* dark grey */
.event-color-4 { background: hsl(0, 80%, 70%) }   /* red */
.event-color-5 { background: hsl(40, 80%, 70%) }  /* orange */
.event-color-6 { background: hsl(200, 80%, 70%) } /* green */
.event-color-7 { background: hsl(280, 80%, 70%) } /* purple */

/* Color tokens (dark) */
@media (prefers-color-scheme: dark) {
  :root {
    --panel: #111318;
    --today: #f83;
    --ink: #ddd;
    --strong: #fff;
    --muted: #888;
    --weekend: #999;
    --firstday: #fff;
    --select: #22a;
    --shadow: #888;
    --label-bg: #1a1d25;
    --label-bg-rgb: 26, 29, 37;
  }

  .dec { background: hsl(220 50% 8%) }
  .jan { background: hsl(220 50% 6%) }
  .feb { background: hsl(220 50% 8%) }
  .mar { background: hsl(125 60% 6%) }
  .apr { background: hsl(125 60% 8%) }
  .may { background: hsl(125 60% 6%) }
  .jun { background: hsl(45 85% 8%) }
  .jul { background: hsl(45 85% 6%) }
  .aug { background: hsl(45 85% 8%) }
  .sep { background: hsl(18 78% 6%) }
  .oct { background: hsl(18 78% 8%) }
  .nov { background: hsl(18 78% 6%) }

  .event-color-0 { background: hsl(0, 0%, 20%) }  /* lightest grey */
  .event-color-1 { background: hsl(0, 0%, 30%) }  /* light grey */
  .event-color-2 { background: hsl(0, 0%, 40%) }  /* medium grey */
  .event-color-3 { background: hsl(0, 0%, 50%) }  /* dark grey */
  .event-color-4 { background: hsl(0, 70%, 50%) }   /* red */
  .event-color-5 { background: hsl(40, 70%, 50%) }  /* orange */
  .event-color-6 { background: hsl(200, 70%, 50%) } /* green */
  .event-color-7 { background: hsl(280, 70%, 50%) } /* purple */
}