/*
 * Branded icon primitives.
 *
 * Shared by the front end (cards + modal) and the admin Icons tab, so a preview in wp-admin is
 * the same pixels as the live site. Sizing lives with each component; this file only owns colour.
 *
 * Every icon in assets/icons/ is normalised by bin/normalize-icons.py so that each stroked shape
 * carries BOTH its brand hex (as an SVG presentation attribute) and a colour class. A CSS rule
 * always beats a presentation attribute, so the same file renders two ways:
 *
 *   .pjb-icon--duo   two-tone, as drawn — modal header
 *   .pjb-icon--mono  every stroke forced to one colour — sidebar, cards, admin previews
 *
 * Keeping the hex on the element means an icon still renders in brand colours if this stylesheet
 * fails to load. (Deliberately not `stroke="var(--x)"`: var() inside an SVG presentation
 * attribute is unreliable in Safari.)
 */

.pjb-icon {
    display: block;
    width: 100%;
    height: 100%;
}

/* Strokes are non-scaling, so stroke-width is in screen pixels and stays even across the
   icons' differing viewBox scales and the 60px-vs-20px render sizes. */
.pjb-icon .pjb-icon-stroke {
    stroke-width: var(--pjb-icon-weight, 1.5px);
}

.pjb-icon--duo .pjb-icon-stroke--blue {
    stroke: var(--pjb-icon-blue, #007fb0);
}
.pjb-icon--duo .pjb-icon-stroke--coral {
    stroke: var(--pjb-icon-coral, #fe6b5b);
}

.pjb-icon--mono .pjb-icon-stroke--blue,
.pjb-icon--mono .pjb-icon-stroke--coral {
    stroke: var(--pjb-icon-mono, #007fb0);
}