/* abcm × AUTOOL Brand Home 0.8.6 — light mode (research/audit-brand-home.md).
 * Only modules on the dark / ink schemes flip (paper / white / brand are light in both modes);
 * photo and video areas keep their dark tokens. Specificity: html[data-abcm] (0,1,1) + scheme
 * class beats .abh-t-dark.abh-sx (0,2,0); no !important in the plugin. */

/* 1. Scheme tokens: dark → page background, ink → surface. */
html[data-abcm="light"] .abh-t-dark {
	--bg: var(--abcm-bg);
	--fg: var(--abcm-text);
	--mu: var(--abcm-text-2);
	--ln: var(--abcm-line);
	--card: var(--abcm-surface);
	--acc: var(--abcm-text);
	--focus: var(--abcm-text);
}
html[data-abcm="light"] .abh-t-ink {
	--bg: var(--abcm-surface);
	--fg: var(--abcm-text);
	--mu: var(--abcm-text-2);
	--ln: var(--abcm-line);
	--card: var(--abcm-bg);
	--acc: var(--abcm-text);
	--focus: var(--abcm-text);
}

/* 2. Dark islands: photo / video areas keep the dark tokens (their buttons, links and focus rings use them).
 * .abh-sx sets --focus:var(--fg) on the section, which inherits as a computed value, so it is reset here too. */
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-hero,
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink) .abh-panel,
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-cta.has-image,
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-stories--launch:not(.abh-stories--posts) .abh-st.is-feature .abh-st__card {
	--bg: var(--abcm-d1);
	--fg: #F0F0F5;
	--mu: rgba(240, 240, 245, .68);
	--ln: rgba(255, 255, 255, .16);
	--card: var(--abcm-d2);
	--acc: var(--abh-brand);
	--focus: var(--abh-brand);
	color-scheme: dark;
}
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-sx .abh-panel {
	--fg: #F0F0FA;
	--mu: rgba(240, 240, 250, .62);
	--ln: rgba(240, 240, 250, .16);
	--focus: #F0F0FA;
}
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-cta.has-image {
	--mu: rgba(240, 240, 245, .78);
	--ln: rgba(255, 255, 255, .2);
}

/* 3. Yellow text and thin yellow indicators become ink; title highlights become a marker underline. */
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink):not(.abh-cta.has-image) :is(.abh-title, .abh-social__title) em {
	color: inherit;
	box-shadow: inset 0 -.2em 0 var(--abh-brand);
}
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink) .abh-stat__num small {
	color: var(--fg);
}
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink) .abh-stage__tab i,
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink) .abh-cats__tab::before {
	background: var(--fg);
}
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink) .abh-vid__item[aria-pressed="true"] {
	border-left-color: var(--fg);
}
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink) .abh-st__link:focus-visible::after,
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink) :is(a.abh-cat, .abh-cats__panel):focus-visible {
	outline-color: var(--fg);
}

/* 4. Product stage: white product photos melt into the light stage. */
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink) .abh-stage__img {
	mix-blend-mode: multiply;
}

/* 5. Join us key figures: plain cards instead of white-edged glass. */
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink) .abh-fig {
	border: 1px solid var(--ln);
	background: var(--card);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink) .abh-fig__value {
	color: var(--fg);
}

/* 6. Stories from site articles: the lead story's text sits beside its picture, so the card flips. */
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-stories--launch.abh-stories--posts .abh-st.is-feature .abh-st__card {
	background: transparent;
	color: var(--fg);
}
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-stories--posts .abh-st.is-feature .abh-st__panel,
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-stories--posts .abh-st.is-feature .abh-st__meta {
	color: var(--fg);
}
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-stories--posts .abh-st.is-feature .abh-st__type,
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-stories--posts .abh-st.is-feature .abh-st__text {
	color: var(--mu);
}
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-stories--posts .abh-st.is-feature .abh-st__more {
	border-color: color-mix(in srgb, var(--fg) 35%, transparent);
	background: transparent;
	color: var(--fg);
}
@media (hover: hover) {
	html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-stories--posts .abh-st.is-feature .abh-st__card:hover .abh-st__more {
		background: var(--fg);
		color: var(--bg);
	}
}

/* 7. Service & support rows: the contact block beside the photo flips; the photo stays. */
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-support--rows .abh-support__desk {
	background: var(--bg);
	color: var(--fg);
}
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-support--rows .abh-support__desk-title,
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-support--rows .abh-contact__text span {
	color: var(--fg);
}
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-support--rows .abh-support__desk-text,
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-support--rows .abh-contact__text small {
	color: var(--mu);
}
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-support--rows .abh-support__contacts,
html[data-abcm="light"] :is(.abh-t-dark, .abh-t-ink).abh-support--rows .abh-support__contacts li + li {
	border-top-color: var(--ln);
}