/* ==========================================================================
   Illustration palette — every drawing in inc/illustrations.php uses these
   classes, so the drawings follow light / dark mode automatically.
   ========================================================================== */

.illus {
    width: 100%;
    height: auto;
    overflow: visible;
}

.illus .i-t {
    font-family: var(--font);
    letter-spacing: -0.01em;
}

/* Surfaces & devices */
.illus .i-surf { fill: var(--il-surface); }
.illus .i-surf2 { fill: var(--il-surface-2); }
.illus .i-screen { fill: var(--il-surface); }
.illus .i-dev { fill: var(--il-device); }
.illus .i-dev2 { fill: var(--il-device-2); }
.illus .i-bar { fill: var(--il-bar); }
.illus .i-bar-strong { fill: var(--il-muted); opacity: 0.55; }
.illus .i-shadow { fill: var(--il-shadow); }

/* Text colours */
.illus .i-ink { fill: var(--il-ink); }
.illus .i-muted { fill: var(--il-muted); }
.illus .i-white { fill: #FFFFFF; }
.illus .i-white-50 { fill: rgba(255, 255, 255, 0.55); }
.illus .i-inv { fill: var(--il-surface); }
.illus .i-ink-chip { fill: var(--il-ink); }

/* Brand & status fills */
.illus .i-pri { fill: var(--primary); }
.illus .i-pri-s { fill: var(--primary-soft); }
.illus .i-or { fill: var(--brand-orange); }
.illus .i-or-s { fill: rgba(255, 138, 61, 0.16); }
.illus .i-or-bar { fill: rgba(255, 138, 61, 0.55); }
.illus .i-sky { fill: var(--brand-sky); }
.illus .i-sky-s { fill: rgba(34, 181, 242, 0.16); }
.illus .i-gr { fill: var(--success); }
.illus .i-gr-s { fill: var(--success-soft); }
.illus .i-red { fill: var(--danger); }
.illus .i-yellow { fill: #F5B400; }
.illus .i-chip { fill: #F5C46B; }

/* Strokes */
.illus .s-line { stroke: var(--il-line); }
.illus .s-road { stroke: var(--il-surface); }
.illus .s-pri { stroke: var(--primary); }
.illus .s-or { stroke: var(--brand-orange); }
.illus .s-sky { stroke: var(--brand-sky); }
.illus .s-gr { stroke: var(--success); }
.illus .s-white { stroke: #FFFFFF; }

/* Map background in the delivery drawing reads better slightly darker */
.illus--delivery .i-surf2 { fill: var(--il-panel); }