/* Hairline figures in the Vitruvian palette (design-system/tokens.css). A page sets three
   colours on the figure or an ancestor and the five Hairline strokes follow:
     --hl-bg      the ground the figure sits on (its plates are filled with it)
     --hl-ink     the line colour
     --hl-accent  the one highlight
   Defaults: Paper, Ink and Vitruvian red, in light and dark. */
.vs-hl {
  --hairline-plate: var(--hl-bg, var(--vs-paper, #f4f4f4));
  --hairline-hi: var(--hl-accent, var(--vs-red, #931914));
  --hairline-edge: color-mix(in srgb, var(--hl-ink, var(--vs-ink, #201f1e)) 82%, var(--hairline-plate));
  --hairline-mid: color-mix(in srgb, var(--hl-ink, var(--vs-ink, #201f1e)) 48%, var(--hairline-plate));
  --hairline-lo: color-mix(in srgb, var(--hl-ink, var(--vs-ink, #201f1e)) 22%, var(--hairline-plate));
  --hairline-stroke: 1.1;
  display: block;
}