/* The Hark chart palette for Chart.js. Load it after hark.css. style-gates: data */
:root {
  --chart-ink: #1d1d1f;            /* the story: one series, or the one that matters */
  --chart-ink-2: #1d1d1f80;      /* the comparison beside the story; axis and legend text */
  --chart-ink-3: #1d1d1f4d;
  --chart-reference: #1d1d1f24;  /* baselines, targets, averages: dashed 3 / 4 */
  --chart-grid: #1d1d1f12;
  --chart-accent: #ff4d00;                              /* the one thing to look at now; never a series or a fill */
  --chart-good: #607868;           /* positive, up, on track */
  --chart-bad: #9c635e;            /* negative, down, off track */
  --chart-muted: var(--chart-ink-3);                    /* context: the rest around a highlight, washes */
  /* Three or more series take these in order; one or two series take the inks. */
  --chart-1: #b1bcd2;
  --chart-2: #607868;
  --chart-3: #dbb691;
  --chart-4: #a79fb8;
  --chart-5: #d9c489;
  --chart-6: #7e9c9b;
  --chart-7: #c9a3a8;
  --chart-on-colour: #1d1d1f;                           /* text drawn on the seven colours, pale in both themes */
  --chart-mono: "GT Standard Mono", "Geist Mono", ui-monospace, monospace; /* every number on a chart */
}

/* @component chart (Chart.js) */
.chart { border: 1px solid var(--stroke-secondary); }
.chart__cap { font: var(--type-body-strong); color: var(--text-primary); margin-bottom: 14px; }
.chart__cap small { display: block; margin-top: 2px; font: var(--type-caption); color: var(--text-secondary); }
.chart__canvas { position: relative; height: 280px; }
.chart__canvas--tall { height: 400px; }
@media (max-width: 599px) {
  .chart__canvas { height: 220px; }
  .chart__canvas--tall { height: 320px; }
}

/* Dark theme only when chosen (light by default) */
:root[data-theme="dark"] {
  --chart-ink: #f5f5f7;
  --chart-ink-2: #f5f5f780;
  --chart-ink-3: #f5f5f74d;
  --chart-reference: #f5f5f724;
  --chart-grid: #f5f5f712;
  --chart-good: #8fa898;
  --chart-bad: #b97f7a;
  --chart-1: #c3ccdd;
  --chart-2: #8fa898;
  --chart-3: #e2c39f;
  --chart-4: #b9b2c9;
  --chart-5: #e2d09e;
  --chart-6: #96b3b2;
  --chart-7: #d6b5b9;
}