/*
 * Line-art illustrations. Hairline strokes (illustration-stroke-width with
 * non-scaling-stroke), structure lines are solid or dashed neutrals, and the
 * only color is the brand green gradient referenced by each SVG.
 * Also inlined into generated public error pages, so keep it self-contained.
 */
@layer components {
  .dms-illustration {
    display: block;
    height: auto;
    overflow: visible;
  }

  .dms-illustration :is(path, rect, circle) {
    fill: none;
    stroke-width: var(--dms-illustration-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .dms-illustration .dms-ill-surface {
    fill: var(--dms-background-white);
    stroke: var(--dms-border);
  }

  .dms-illustration .dms-ill-line {
    stroke: var(--dms-border);
  }

  .dms-illustration .dms-ill-dash {
    stroke: var(--dms-border);
    stroke-dasharray: var(--dms-illustration-dash);
  }

  .dms-illustration .dms-ill-stop-start {
    stop-color: var(--dms-brand-start);
  }

  .dms-illustration .dms-ill-stop-end {
    stop-color: var(--dms-brand-end);
  }
}