/* ============================================================
 * Brand icons
 *
 * Presentation for the 13 line-art concept icons. Geometry lives in
 * inc/icons.php and is inlined by emo2026_icon(); this file decides how
 * big they are, what colour they take, and how heavy the line reads.
 *
 * Everything is driven by three custom properties, so a component can
 * retune an icon from its own stylesheet without a new modifier:
 *
 *   --emo-icon-size    the rendered box, width and height both
 *   --emo-icon-stroke  line weight in the 132-unit viewBox
 *   --emo-icon-color   the ink; strokes and dots both ride currentColor
 *
 * Loaded site-wide by inc/icons.php after tokens.css.
 * ============================================================ */

/* ------------------------------------------------------------
 * Base
 *
 * The default is the medium step of the ramp below. Sizing happens on
 * the SVG itself rather than a wrapper: the viewBox is square, so one
 * length settles both axes and there is no box to keep in sync.
 * ------------------------------------------------------------ */
.emo-icon {
	display: block;
	/* Never let a flex row squeeze the artwork; the icons are already
	   mostly air and a compressed one reads as a different drawing. */
	flex: none;
	width: var(--emo-icon-size, 4.5rem);
	height: var(--emo-icon-size, 4.5rem);
	color: var(--emo-icon-color, var(--color-accent));
	stroke-width: var(--emo-icon-stroke, 2.6);
	/* The sheet is drawn with miter joins; the default limit of 4 clips
	   the sharp corner of the Produkte triangle into a bevel. */
	stroke-miterlimit: 10;
}

/* ------------------------------------------------------------
 * Size ramp
 *
 * The set is NOT normalised: the studio drew every icon at one scale, so
 * the isolator mark fills 97% of the box and the calendar 55%, exactly
 * as on their sheet. That is deliberate and the ramp preserves it, which
 * is also why one stroke weight reads the same across all thirteen.
 *
 * The stroke does not scale linearly with the box, though. Faithful 1:1
 * is 2 units, which lands at 2px only when the icon is drawn at its full
 * 132px; at 40px that same 2 renders as a 0.6px hairline that greys out
 * and disappears on a non-retina screen. Each step therefore compensates
 * so the line stays in the 1.1px to 2px band, the way an optical size
 * works in a typeface. The comment on each line is what it actually
 * renders at.
 * ------------------------------------------------------------ */
.emo-icon--xs { --emo-icon-size: 2.5rem;  --emo-icon-stroke: 3.6; }  /*  40px, 1.09px */
.emo-icon--sm { --emo-icon-size: 3.5rem;  --emo-icon-stroke: 3;   }  /*  56px, 1.27px */
.emo-icon--md { --emo-icon-size: 4.5rem;  --emo-icon-stroke: 2.6; }  /*  72px, 1.42px */
.emo-icon--lg { --emo-icon-size: 6rem;    --emo-icon-stroke: 2.3; }  /*  96px, 1.67px */
.emo-icon--xl { --emo-icon-size: 8.25rem; --emo-icon-stroke: 2;   }  /* 132px, 1:1 with the sheet */

/* ------------------------------------------------------------
 * Ink
 *
 * EMO CORE is the default. The studio's sheet presents the set in the
 * mint tint, and that was the first default here, but mint is ~1.3:1 on
 * white and the site does not have the sheet's luxury of a whole page of
 * air: on --color-bg-elevated (the launcher tiles) and on --emo-grad-wash
 * (every product-line hero, whose last stop IS that same mint) the marks
 * went from faint to invisible. Owner 2026-09-08, "too light or invisible
 * in some cases".
 *
 * Green also reads lighter here than the number suggests, because these
 * are 2-unit strokes with a lot of white inside them, not solid type.
 * On mint it is ~4.18:1, which DESIGN-SPEC.md section 11 permits for
 * large text and icons, and every icon on the site is 56px or larger.
 * ------------------------------------------------------------ */
.emo-icon--accent  { --emo-icon-color: var(--color-accent); }
.emo-icon--ink     { --emo-icon-color: var(--color-text-primary); }
.emo-icon--inverse { --emo-icon-color: var(--color-text-inverse); }

/* The delivered look, kept as an opt-in for a large mark on plain white
   with room around it. Decoration only: at ~1.3:1 an icon wearing this
   must never be the only thing carrying a meaning. */
.emo-icon--tint    { --emo-icon-color: var(--color-brand-tint-mint); }

/* Inside a link or a button the icon follows the text it belongs to,
   including that text's hover and focus colours. */
.emo-icon--current { --emo-icon-color: currentColor; }

/* ------------------------------------------------------------
 * Beside text
 *
 * The default is a block, i.e. an icon stacked above its label. This
 * modifier is for the inline case, where the icon sits on a line of type
 * and has to share its baseline.
 *
 * It sets its own size, in em rather than rem, and that is the point:
 * vertical-align is measured against the surrounding font size, so a box
 * sized in rem drifts off the baseline the moment the text around it is
 * not 16px. Do NOT combine it with a ramp step above; the step would
 * resize the box and leave the alignment behind. The stroke is heavy
 * because 2em of a body line is a small icon.
 * ------------------------------------------------------------ */
.emo-icon--inline {
	display: inline-block;
	--emo-icon-size: 2em;
	--emo-icon-stroke: 6;
	/* Lifts the artwork's centre onto the cap-height centre of the text. */
	vertical-align: -0.7em;
	margin-inline-end: 0.1em;
}

/* ------------------------------------------------------------
 * Reduced motion and forced colours
 * ------------------------------------------------------------ */

/* In a forced-colours mode the tint is replaced by the user's own ink,
   which is the correct outcome; make sure the solid dots follow too
   rather than staying a system fill. */
@media (forced-colors: active) {
	.emo-icon {
		color: CanvasText;
	}

	.emo-icon [fill="currentColor"] {
		fill: CanvasText;
	}
}