figure {
  margin: 0;
}

figure img {
  max-width: 100%;
}

figure > h1,
figure > h2,
figure > h3,
figure > span > h3,
figure > h4,
figure > h5,
figure > h6 {
  color: #333;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 0.25rem;
}
figure > h1,
figure > h2 {
  color: #212121;
}
@media (prefers-color-scheme: dark) {
  figure > h1,
  figure > h2,
  figure > h3,
  figure > span > h3,
  figure > h4,
  figure > h5,
  figure > h6 {
    color: #ddd;
  }
  figure > h1,
  figure > h2 {
    color: #e0e0e0;
  }
}

/* heading */
figure > h2 {
  font-family: 'Abril Text', serif;
  font-weight: 600;
  font-size: 24px;
  font-variant: lining-nums;
  margin-bottom: 0;
}

/* subheading */
figure > h3,
figure > span > h3 {
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 16px;
}

/* caption */
figcaption {
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #838383;
}
figcaption:not(:has(> span)),
figcaption > span {
  white-space: pre-line;
}
figcaption > span > * {
  white-space: break-spaces;
}

/* legend swatches */
figure > div[class^='plot-'][class*='-swatches'],
figure > svg[class^='plot-'][class*='-ramp'] text {
  font-family: 'JetBrains Mono', 'JetBrains Mono Embedded', monospace;
  font-weight: 500;
  font-size: 12px;
}

/* figure */
figure > svg {
  font-family: 'JetBrains Mono', 'JetBrains Mono Embedded', monospace;
  font-weight: 500;
  font-size: 12px;
}

@media (prefers-color-scheme: dark) {
  svg[class^='plot-'] {
    --background-color: #212121;
    --text-color: #e0e0e0;
    background-color: var(--background-color);
    color: var(--text-color);
  }
  g[aria-label='crosshair text'] {
    stroke: #212121;
  }
  figcaption {
    color: #cccccc;
  }
  g[aria-label='tip'] {
    fill: #282828;
  }
}

/* use stanadrd accent color for marks when none is specified */
figure {
  --fds-accent-plot: hsla(var(--fds-accent-dark-p, var(--fds-accent-dark-2)));
}
@media (prefers-color-scheme: dark) {
  figure {
    --fds-accent-plot: hsla(var(--fds-accent-light-p, var(--fds-accent-light-2)));
  }
}
figure
  > svg
  > g:not([aria-label*='axis']):not([aria-label*='tick']):not([aria-label*='label']):not(
    [aria-label*='text']
  ):not([aria-label*='grid']):not([aria-label*='tip']):not([aria-label*='rule']) {
  color: var(--fds-accent-plot);
}
