/* ─────────────────────────────────────────────────────────────────────────
   DotTut illustration system
   Shared classes for inline-SVG illustrations. Every illustration is flat
   vector drawn from the brand palette via the site's CSS custom properties,
   so it recolors automatically for light/dark and needs zero network requests
   (CSP-safe). Compose shapes with these classes + presentation attributes
   (fill-opacity, stroke-width, opacity) for tonal variation.
   ───────────────────────────────────────────────────────────────────────── */

.il-svg   { width: 100%; height: auto; display: block; }

/* surfaces / structure */
.il-win   { fill: var(--surface); stroke: rgba(var(--ink), .10); stroke-width: 1.5; }
.il-panel { fill: var(--surface-2); }
.il-sh    { fill: #000; }                                    /* soft cast shadow — pair with opacity */

/* brand accent */
.il-acc   { fill: var(--accent-color); }                     /* solid — vary with fill-opacity */
.il-accs  { fill: none; stroke: var(--accent-color); }       /* accent stroke */

/* neutral ink (adapts: light ink on dark, dark ink on light) */
.il-ink   { fill: rgba(var(--ink), 1); }                     /* vary with fill-opacity */
.il-line  { fill: none; stroke: rgba(var(--ink), .12); }     /* faint rules / tracks */

/* chart / diagram nodes */
.il-node  { fill: var(--surface); stroke: var(--accent-color); stroke-width: 2.5; }