/* Color follows a role: brand fills, readable foregrounds, and elevated surfaces. */
html[data-ser-style="modern"] #ser-design[data-active-view][data-theme]{
 --ser-accent-foreground:var(--ser-accent);
 --ser-benefit-foreground:var(--ser-accent);
 --ser-surface-overlay:var(--ser-surface);
 --ser-focus-ring:var(--ser-accent);
}
html[data-ser-style="modern"] #ser-design[data-active-view][data-theme="dark"]{
 --ser-accent-foreground:#79b5ff;
 --ser-benefit-foreground:var(--ser-accent-foreground);
 --ser-surface-overlay:#242424;
 --ser-focus-ring:var(--ser-accent-foreground);
}

/* Floating UI sits above cards without changing its size or position. */
html[data-ser-style="modern"] #ser-design[data-active-view][data-theme] :is(.ser-language-picker .ser-language-menu,dialog.ser-numbers-panel,.ser-metric-popover){background:var(--ser-surface-overlay)}

/* Preserve the blue fill; small foreground text gets its own contrast-safe role. */
html[data-ser-style="modern"] #ser-design[data-active-view][data-theme] :is(
 .ser-language-picker .ser-language-option[aria-pressed="true"],
 .ser-service-picker button[aria-pressed="true"],
 [data-barber-market][aria-pressed="true"],
 .ser-barber-report-tabs button[aria-pressed="true"],
 .ser-numbers-tabs button[aria-pressed="true"],
 .ser-work-selector .ser-work-business-options button[aria-pressed="true"],
 .ser-work-selector .ser-work-service-options button[aria-pressed="true"],
 .sa-about .sa-scope-tabs>button[aria-selected="true"],
 .ser-offer-markets button[aria-pressed="true"],
 .ser-release-secondary,.ser-numbers-trigger,.ser-workflow-after .ser-workflow-state,
 .ser-barber-details>summary,.ser-work-details>summary,.ser-barber-details-action,
 .ser-work-visual>.ser-creator-report header a,.ser-numbers-edit-heading button,.ser-numbers-choose,
 .ser-offer-assumptions summary,.ser-offer-case-link,.ser-demo-calendar>span,
 .ser-phone-caption .ser-phone-mode,.ser-metric-popover footer a,
 .sp-client>span,.sp-metrics dt,.sp-example-link,.sa-about .sa-principle-index,
 .ser-approach-row .ser-number,.ser-barber-comparison dd>strong,
 .sp-accent,.sp-stage[aria-selected="true"] .sp-stage-number,.sp-document svg,
 .sp-questions summary>span:last-child,
 .sa-about .sa-title-accent,.sa-about .sa-text-link>span:last-child,.sa-about .sa-faq-icon,
 .ser-metric-help:is(:hover,[aria-expanded="true"]),
 .ser-choice-footer a:is(:hover,:focus-visible)
){color:var(--ser-accent-foreground)}
html[data-ser-style="modern"] #ser-design[data-active-view][data-theme] [data-ser-number-role="benefit"][data-ser-number-state="positive"]{color:var(--ser-benefit-foreground)}

/* Figures and their units share the same readable blue in either theme. */
html[data-ser-style="modern"] #ser-design[data-active-view][data-theme] :is([data-work-figure],[data-ser-impact-value],[data-ser-extra-value],[data-ser-numbers-value],.ser-econ-primary dd)[data-ser-number-role="benefit"][data-ser-number-state="positive"]{color:var(--ser-benefit-foreground)}
html[data-ser-style="modern"] #ser-design[data-active-view][data-theme="dark"] [data-work-layout="04"] [data-work-numeric] .ser-work-figure-unit{color:var(--ser-accent-foreground)}

/* Theme changes must not add decoration or change the shape of a control. */
html[data-ser-style="modern"] #ser-design[data-active-view][data-theme] :is(.ser-release-secondary,.ser-numbers-trigger,.ser-offer-case-link,.ser-metric-popover footer a){text-decoration:none;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:4px}
html[data-ser-style="modern"] #ser-design[data-active-view][data-theme] :is(.ser-release-secondary,.ser-numbers-trigger,.ser-offer-case-link,.ser-metric-popover footer a):is(:hover,:focus-visible){text-decoration-line:underline}
html[data-ser-style="modern"] #ser-design[data-active-view][data-theme] .sp-example-link{text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:5px}

/* One visible focus color also works on the lighter modal surface. */
html[data-ser-style="modern"] #ser-design[data-active-view][data-theme] :focus-visible{outline-color:var(--ser-focus-ring)!important}
html[data-ser-style="modern"] #ser-design[data-active-view][data-theme] .ser-phone-control:focus-within{outline-color:var(--ser-focus-ring)}
@media(forced-colors:active){
 html[data-ser-style="modern"] #ser-design[data-active-view][data-theme] :focus-visible{outline-color:Highlight!important}
}