/* Shared semantic color application.
   Layout, geometry, spacing, and responsive behavior remain in the existing
   component styles. This file only connects interface chrome to theme tokens. */

html[data-interface-skin] body,
html[data-interface-skin] .app { background:var(--app-bg)!important;color:var(--text-primary)!important; }
html[data-interface-skin] .main { background:var(--workspace-bg,var(--app-bg))!important;color:var(--text-primary)!important; }
html[data-interface-skin] body,
html[data-interface-skin] button,
html[data-interface-skin] input,
html[data-interface-skin] select,
html[data-interface-skin] textarea { font-family:var(--font-ui); }
html[data-interface-skin] body { font-weight:var(--body-weight); }
html[data-interface-skin] :where(h1,h2,h3,h4,.workspace-toolbar-title,.v5-dashboard-panel-head,.customer-v2-section-head h2) { font-family:var(--font-heading);font-weight:var(--heading-weight); }
html[data-interface-skin] :where(button,.btn,.v3-primary-button,.menu-item,.search-item,.v3-filter-option,.v5-settings-nav-item) { font-family:var(--font-ui)!important;font-weight:var(--button-weight)!important; }
html[data-interface-skin] :where(input,select,textarea,.bc-combobox-search input) { font-family:var(--font-ui)!important;font-weight:var(--input-weight)!important; }
html[data-interface-skin] :where(label,.eyebrow,.kpi-label,.v3-filter-label,.v5-settings-label,.customer-v2-info-item>div>span) { font-family:var(--font-ui)!important;font-weight:var(--label-weight)!important; }
html[data-interface-skin] :where(.nav-item,.nav-copy strong,.v3-mobile-nav-item) { font-family:var(--font-ui)!important;font-weight:var(--nav-weight)!important; }
html[data-interface-skin] :where(table.data th,.data-table th,.invoice-line-head,.customer-v2-payment-list-head) { font-family:var(--font-ui)!important;font-weight:var(--table-heading-weight)!important; }
html[data-interface-skin] .topbar-logo { filter:var(--topbar-logo-filter); }
html[data-interface-skin] .topbar-logo-dynamic { filter:none!important; }
html[data-interface-skin] .invoice-flow-mark__bar--neutral,
html[data-interface-skin] .invoice-flow-mark__wordmark { fill:var(--text-primary)!important;color:var(--text-primary)!important; }
html[data-interface-skin] .invoice-flow-mark__bar--accent { fill:var(--brand-accent)!important;background:var(--brand-accent)!important; }
html[data-interface-skin] .v3-mobile-topbar .invoice-flow-mark__bar--neutral { fill:var(--mobile-topbar-text,var(--sidebar-text))!important; }
html[data-interface-skin] .popup-brand .invoice-flow-mark__bar--neutral { fill:currentColor!important; }

/* Navigation shell */
html[data-interface-skin] .sidebar { background:var(--sidebar-surface,var(--sidebar-bg))!important;color:var(--sidebar-text)!important;border-color:var(--sidebar-border)!important; }
html[data-interface-skin] .sidebar :where(.brand-copy strong,.side-user strong) { color:var(--sidebar-text)!important; }
html[data-interface-skin] .sidebar :where(.brand-copy small,.nav-group,.side-user small) { color:var(--sidebar-muted)!important; }
html[data-interface-skin] .sidebar :where(.side-collapse,.side-card,.side-user) { border-color:var(--sidebar-border)!important;background:color-mix(in srgb,var(--sidebar-text) 5%,transparent)!important; }

/* Sidebar navigation states are deliberately explicit. Legacy page CSS uses
   high-specificity !important selectors, so every painted descendant must be
   assigned from the same semantic state instead of relying on inheritance. */
html[data-interface-skin] .sidebar .nav-item:not(.active) { background:transparent!important;color:var(--sidebar-muted)!important;border-color:transparent!important; }
html[data-interface-skin] .sidebar .nav-item:not(.active) .nav-copy strong { color:var(--sidebar-muted)!important; }
html[data-interface-skin] .sidebar .nav-item:not(.active) :is(.nav-ico,.nav-ico svg) { color:var(--sidebar-muted)!important; }
html[data-interface-skin] .sidebar .nav-item:not(.active):hover { background:var(--sidebar-hover)!important;color:var(--sidebar-hover-text)!important;border-color:var(--sidebar-border)!important; }
html[data-interface-skin] .sidebar .nav-item:not(.active):hover .nav-copy strong { color:var(--sidebar-hover-text)!important; }
html[data-interface-skin] .sidebar .nav-item:not(.active):hover :is(.nav-ico,.nav-ico svg) { color:var(--sidebar-hover-icon)!important; }
html[data-interface-skin] .sidebar .nav-item:not(.active):active { background:var(--sidebar-active-bg)!important;color:var(--sidebar-active-text)!important; }
html[data-interface-skin] .sidebar .nav-item:not(.active):active .nav-copy strong { color:var(--sidebar-active-text)!important; }
html[data-interface-skin] .sidebar .nav-item:not(.active):active :is(.nav-ico,.nav-ico svg) { color:var(--sidebar-active-icon)!important; }
html[data-interface-skin] .sidebar .nav-item.active { background:var(--sidebar-selected)!important;color:var(--sidebar-selected-text)!important;border-color:color-mix(in srgb,var(--sidebar-selected-icon) 35%,var(--sidebar-border))!important;box-shadow:none!important; }
html[data-interface-skin] .sidebar .nav-item.active .nav-copy strong { color:var(--sidebar-selected-text)!important; }
html[data-interface-skin] .sidebar .nav-item.active .nav-copy small { color:var(--sidebar-selected-muted)!important; }
html[data-interface-skin] .sidebar .nav-item.active :is(.nav-ico,.nav-ico svg) { color:var(--sidebar-selected-icon)!important; }
html[data-interface-skin] .sidebar .nav-item.active .nav-ico { background:color-mix(in srgb,var(--sidebar-selected-icon) 16%,transparent)!important; }
html[data-interface-skin] .sidebar .nav-item.active:hover { background:color-mix(in srgb,var(--sidebar-selected) 84%,var(--sidebar-hover))!important;color:var(--sidebar-selected-text)!important; }
html[data-interface-skin] .sidebar .nav-item.active:hover .nav-copy strong { color:var(--sidebar-selected-text)!important; }
html[data-interface-skin] .sidebar .nav-item.active:hover .nav-copy small { color:var(--sidebar-selected-muted)!important; }
html[data-interface-skin] .sidebar .nav-item.active:hover :is(.nav-ico,.nav-ico svg) { color:var(--sidebar-selected-icon)!important; }
html[data-interface-skin] .sidebar .nav-item.active:active { background:var(--sidebar-active-bg)!important;color:var(--sidebar-active-text)!important;box-shadow:none!important; }
html[data-interface-skin] .sidebar .nav-item.active:active .nav-copy strong { color:var(--sidebar-active-text)!important; }
html[data-interface-skin] .sidebar .nav-item.active:active .nav-copy small { color:var(--sidebar-active-muted)!important; }
html[data-interface-skin] .sidebar .nav-item.active:active :is(.nav-ico,.nav-ico svg) { color:var(--sidebar-active-icon)!important; }

html[data-interface-skin] .sidebar :where(.side-collapse,.side-user):hover { background:var(--sidebar-hover)!important;color:var(--sidebar-hover-text)!important;border-color:var(--sidebar-border)!important; }
html[data-interface-skin] .sidebar :where(.side-collapse,.side-user):hover svg { color:var(--sidebar-hover-icon)!important; }
html[data-interface-skin] .sidebar .side-user:hover :where(small,.side-user-copy small) { color:var(--sidebar-hover-muted)!important; }
html[data-interface-skin] .sidebar :where(.side-collapse,.side-user):active { background:var(--sidebar-active-bg)!important;color:var(--sidebar-active-text)!important; }
html[data-interface-skin] .sidebar :where(.side-collapse,.side-user):active svg { color:var(--sidebar-active-icon)!important; }
html[data-interface-skin] .topbar { background:var(--topbar-bg,color-mix(in srgb,var(--app-bg) 92%,transparent))!important;color:var(--text-primary)!important;border-color:var(--divider)!important; }
html[data-interface-skin] .v3-mobile-topbar { background:var(--mobile-topbar-bg,var(--sidebar-bg))!important;color:var(--mobile-topbar-text,var(--sidebar-text))!important;border-color:var(--sidebar-border)!important; }
html[data-interface-skin] .v3-mobile-nav { background:var(--mobile-nav-bg,color-mix(in srgb,var(--sidebar-bg) 96%,transparent))!important;border-color:var(--sidebar-border)!important; }
html[data-interface-skin] .v3-mobile-nav-item { color:var(--sidebar-muted)!important; }
html[data-interface-skin] .v3-mobile-nav-item:hover { background:var(--sidebar-hover)!important;color:var(--sidebar-hover-text)!important; }
html[data-interface-skin] .v3-mobile-nav-item:hover svg { color:var(--sidebar-hover-icon)!important; }
html[data-interface-skin] .v3-mobile-nav-item:active { background:var(--sidebar-active-bg)!important;color:var(--sidebar-active-text)!important; }
html[data-interface-skin] .v3-mobile-nav-item.active { background:var(--sidebar-selected)!important;color:var(--sidebar-selected-text)!important; }
html[data-interface-skin] .v3-mobile-nav-item.active svg { color:var(--sidebar-selected-icon)!important; }
html[data-interface-skin] .v3-mobile-nav-item.active:active { background:var(--sidebar-active-bg)!important;color:var(--sidebar-active-text)!important;box-shadow:none!important; }

/* Surfaces and collection containers */
html[data-interface-skin] :where(
  .v3-card-surface,.panel,.card,.v5-dashboard-stat,.v5-dashboard-panel,.v5-record-card,.v5-record-list,
  .v3-product-card,.v3-products-list,.customers-v2-list,.customers-v2-card,.customer-v2-pane,
  .customer-v2-details,.customer-v2-detail-item,.customer-v2-summary .customer-v2-metrics>div,
  .customer-v2-section-card,.v5-settings-nav,.v5-settings-panel,.v5-settings-disclosure,
  .v5-email-editor-shell,.v5-email-composer,.v5-mobile-install-card,.v5-team-member,.v5-role-grid article
) { background:var(--card-bg)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important;box-shadow:var(--shadow-low); }
html[data-interface-skin] :where(
  .v5-settings-panel-head,.v5-dashboard-panel-head,.customer-v2-card-head,.v5-email-composer-head,
  .customers-v2-filters,.workspace-toolbar-view,.v3-filter-trigger,.customer-v2-payment-list-head
) { background:var(--surface-primary)!important;color:var(--text-primary)!important;border-color:var(--divider)!important; }
html[data-interface-skin] :where(.v5-record-row,.v3-product-list-row,.customers-v2-row,.customer-v2-open-row,.customer-v2-payment-row) { background:var(--table-bg)!important;color:var(--text-primary)!important;border-color:var(--divider)!important; }
html[data-interface-skin] :where(.v5-record-row,.v3-product-list-row,.customers-v2-row,.customer-v2-open-row,.customer-v2-payment-row):hover { background:var(--hover-bg)!important;color:var(--hover-text)!important; }
html[data-interface-skin] :where(.v5-record-row,.v3-product-list-row,.customers-v2-row,.customer-v2-open-row,.customer-v2-payment-row):hover :where(svg,.row-icon) { color:var(--hover-icon)!important; }
html[data-interface-skin] :where(.v5-record-row,.v3-product-list-row,.customers-v2-row,.customer-v2-open-row,.customer-v2-payment-row):hover small { color:var(--hover-muted)!important; }
html[data-interface-skin] :where(.customers-v2-avatar,.customer-v2-avatar) { background:var(--brand-accent-soft)!important;color:var(--brand-accent-text)!important; }

/* Forms and search */
html[data-interface-skin] :where(
  input,select,textarea,.v5-settings-input,.customers-v2-search,.search-box,.bc-combo-trigger,
  .ib3-input,.ib3-textarea,.ib3-select
) { background:var(--input-bg)!important;color:var(--text-primary)!important;border-color:var(--control-border)!important; }
html[data-interface-skin] :where(input,textarea)::placeholder { color:var(--placeholder-text)!important;opacity:1!important; }
html[data-interface-skin] :where(input,select,textarea,button,a,[tabindex]):focus-visible { outline-color:var(--focus-outline)!important;box-shadow:0 0 0 3px var(--focus-ring)!important; }
html[data-interface-skin] .topbar .search-box { border-color:var(--control-border)!important; }
html[data-interface-skin] .topbar .search-box:focus-within { border-color:var(--focus-outline)!important; }
html[data-interface-skin] :where(input,select,textarea,button)[disabled],
html[data-interface-skin] :where(input,select,textarea,button)[aria-disabled="true"] { background:var(--disabled-bg)!important;color:var(--disabled-text)!important;cursor:not-allowed!important;box-shadow:none!important;opacity:1!important; }
html[data-interface-skin] :where(input,select,textarea,button)[disabled] :where(svg,[class*="icon"]),
html[data-interface-skin] :where(input,select,textarea,button)[aria-disabled="true"] :where(svg,[class*="icon"]) { color:var(--disabled-icon)!important; }

/* Every clickable control receives immediate tactile feedback, even when a
   legacy component only supplies layout styles. Color is assigned by the
   semantic action/surface groups below. */
html[data-interface-skin] :where(button:not([disabled]):not([aria-disabled="true"]),[role="button"]:not([aria-disabled="true"]),summary):active {
  transform:translateY(1px) scale(.985)!important;
  transition-duration:0s!important;
}
html[data-interface-skin] :where(.v3-click-surface,.v3-row-surface,.v5-record-row,.v3-product-list-row,.customers-v2-row,.customers-v2-card,.customer-v2-payment-row):active {
  transform:translateY(1px) scale(.997)!important;
}

/* Actions */
html[data-interface-skin] :where(.v3-primary-button,.btn.primary,.customer-v2-actions>.btn.primary,.v5-team-invite-button,.ib3-primary,.bc-empty-combo-trigger,.bc-line-combo-trigger) { background:var(--action-primary)!important;border-color:var(--action-primary)!important;color:var(--action-primary-text)!important; }
html[data-interface-skin] :where(.v3-primary-button,.btn.primary,.customer-v2-actions>.btn.primary,.v5-team-invite-button,.ib3-primary,.bc-empty-combo-trigger,.bc-line-combo-trigger):hover { background:var(--action-primary-hover)!important;border-color:var(--action-primary-hover)!important;color:var(--action-primary-hover-text)!important; }
html[data-interface-skin] :where(.v3-primary-button,.btn.primary,.customer-v2-actions>.btn.primary,.v5-team-invite-button,.ib3-primary,.bc-empty-combo-trigger,.bc-line-combo-trigger):hover svg { color:var(--action-primary-hover-icon)!important; }
html[data-interface-skin] :where(.v3-primary-button,.btn.primary,.customer-v2-actions>.btn.primary,.v5-team-invite-button,.ib3-primary,.bc-empty-combo-trigger,.bc-line-combo-trigger):active { background:var(--action-primary-pressed)!important;border-color:var(--action-primary-pressed)!important;color:var(--action-primary-pressed-text)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--action-primary-pressed-text) 22%,transparent)!important; }
html[data-interface-skin] :where(.v3-primary-button,.btn.primary,.customer-v2-actions>.btn.primary,.v5-team-invite-button,.ib3-primary,.bc-empty-combo-trigger,.bc-line-combo-trigger):active svg { color:var(--action-primary-pressed-icon)!important; }
html[data-interface-skin] :where(
  .btn.ghost,.btn.icon-btn,.v4-chip,.ib3-ghost,.customer-v2-actions>.btn:not(.primary),.workspace-toolbar-actions>button:not(.v3-primary-button),
  .v5-receipt-action:not(.v3-primary-button),.v5-export-grid>button,.v5-email-template-actions>button,.v3-icon-button,.v3-login-secondary,
  .v3-composer-cancel,.v3-composer-mark,.v5-import-cancel,.v5-import-secondary,.v5-doc-more-trigger
) { background:var(--action-secondary)!important;color:var(--action-secondary-text)!important;border-color:var(--control-border)!important; }
html[data-interface-skin] :where(
  .btn.ghost,.btn.icon-btn,.v4-chip,.ib3-ghost,.customer-v2-actions>.btn:not(.primary),.workspace-toolbar-actions>button:not(.v3-primary-button),
  .v5-receipt-action:not(.v3-primary-button),.v5-export-grid>button,.v5-email-template-actions>button,.v3-icon-button,.v3-login-secondary,
  .v3-composer-cancel,.v3-composer-mark,.v5-import-cancel,.v5-import-secondary,.v5-doc-more-trigger
):hover { background:var(--action-secondary-hover)!important;color:var(--action-secondary-hover-text)!important; }
html[data-interface-skin] :where(
  .btn.ghost,.btn.icon-btn,.v4-chip,.ib3-ghost,.customer-v2-actions>.btn:not(.primary),.workspace-toolbar-actions>button:not(.v3-primary-button),
  .v5-receipt-action:not(.v3-primary-button),.v5-export-grid>button,.v5-email-template-actions>button,.v3-icon-button,.v3-login-secondary,
  .v3-composer-cancel,.v3-composer-mark,.v5-import-cancel,.v5-import-secondary,.v5-doc-more-trigger
):hover svg { color:var(--action-secondary-hover-icon)!important; }
html[data-interface-skin] .btn:not(.primary):not(.danger):not(.soft-coral):not(.soft-amber):not(.soft):not(.link):hover { background:var(--action-secondary-hover)!important;color:var(--action-secondary-hover-text)!important;border-color:var(--border-strong)!important; }
html[data-interface-skin] .btn:not(.primary):not(.danger):not(.soft-coral):not(.soft-amber):not(.soft):not(.link):hover svg { color:var(--action-secondary-hover-icon)!important; }
html[data-interface-skin] :where(
  .btn.ghost,.btn.icon-btn,.v4-chip,.ib3-ghost,.customer-v2-actions>.btn:not(.primary),.workspace-toolbar-actions>button:not(.v3-primary-button),
  .v5-receipt-action:not(.v3-primary-button),.v5-export-grid>button,.v5-email-template-actions>button,.v3-icon-button,.v3-login-secondary,
  .v3-composer-cancel,.v3-composer-mark,.v5-import-cancel,.v5-import-secondary,.v5-doc-more-trigger
):active { background:var(--action-secondary-pressed)!important;color:var(--action-secondary-pressed-text)!important;border-color:var(--action-secondary-pressed-icon)!important; }
html[data-interface-skin] :where(
  .btn.ghost,.btn.icon-btn,.v4-chip,.ib3-ghost,.customer-v2-actions>.btn:not(.primary),.workspace-toolbar-actions>button:not(.v3-primary-button),
  .v5-receipt-action:not(.v3-primary-button),.v5-export-grid>button,.v5-email-template-actions>button,.v3-icon-button,.v3-login-secondary,
  .v3-composer-cancel,.v3-composer-mark,.v5-import-cancel,.v5-import-secondary,.v5-doc-more-trigger
):active svg { color:var(--action-secondary-pressed-icon)!important; }
html[data-interface-skin] :where(.btn.danger,.btn.soft-coral,.v5-receipt-action.is-danger):hover { background:var(--status-error)!important;color:var(--status-error-on)!important;border-color:var(--status-error)!important; }
html[data-interface-skin] :where(.btn.danger,.btn.soft-coral,.v5-receipt-action.is-danger):hover svg { color:var(--text-inverse)!important; }
html[data-interface-skin] :where(.btn.soft,.btn.soft-amber):hover { color:var(--hover-text)!important; }
html[data-interface-skin] :where(input,select,textarea,button)[disabled],
html[data-interface-skin] :where(input,select,textarea,button)[aria-disabled="true"] { background:var(--disabled-bg)!important;border-color:var(--control-border)!important;color:var(--disabled-text)!important;box-shadow:none!important;filter:none!important;opacity:1!important; }
html[data-interface-skin] :where(.btn.link,.customer-v2-text-action,a:not(.brand)) { color:var(--link-text); }

/* Tabs, segmented controls, and selected states */
html[data-interface-skin] :where(.customer-v2-segmented,.v5-email-template-tabs) { background:var(--surface-secondary)!important;border-color:var(--border-default)!important; }
html[data-interface-skin] :where(.customer-v2-tabs button,.customer-v2-segmented button,.v5-email-template-tabs button,.v5-settings-nav-item) { color:var(--text-muted)!important; }
html[data-interface-skin] :where(.customer-v2-tabs button:hover,.customer-v2-segmented button:hover,.v5-email-template-tabs button:hover,.v5-settings-nav-item:hover) { background:var(--hover-bg)!important;color:var(--hover-text)!important; }
html[data-interface-skin] :where(.customer-v2-tabs button:hover,.customer-v2-segmented button:hover,.v5-email-template-tabs button:hover,.v5-settings-nav-item:hover) :where(svg,[class*="icon"]) { color:var(--hover-icon)!important; }
html[data-interface-skin] .v5-settings-nav-item:hover small { color:var(--hover-muted)!important; }
html[data-interface-skin] :where(.customer-v2-tabs button,.customer-v2-segmented button,.v5-email-template-tabs button,.v5-settings-nav-item):active { background:var(--active-bg)!important;color:var(--active-text)!important;border-color:var(--active-icon)!important; }
html[data-interface-skin] :where(.customer-v2-tabs button,.customer-v2-segmented button,.v5-email-template-tabs button,.v5-settings-nav-item):active :where(svg,[class*="icon"]) { color:var(--active-icon)!important; }
html[data-interface-skin] :where(.customer-v2-segmented button.is-active,.v5-email-template-tabs button.is-active,[aria-selected="true"]) { background:var(--selected-bg)!important;color:var(--selected-text)!important;border-color:var(--brand-accent-border)!important; }
html[data-interface-skin] :where(.customer-v2-segmented button.is-active,.v5-email-template-tabs button.is-active,[aria-selected="true"]) :where(svg,[class*="icon"]) { color:var(--selected-icon)!important; }
html[data-interface-skin] :where(.customer-v2-segmented button.is-active,.v5-email-template-tabs button.is-active,[aria-selected="true"]) small { color:var(--selected-muted)!important; }
html[data-interface-skin] .v5-settings-nav-item.is-active { background:var(--settings-selected-bg,var(--selected-bg))!important;color:var(--settings-selected-text,var(--selected-text))!important;border-color:var(--brand-accent-border)!important; }
html[data-interface-skin] .v5-settings-nav-item.is-active small { color:var(--selected-muted)!important; }

/* Tables */
html[data-interface-skin] :where(table.data,.data-table,.v5-record-list,.v3-products-list) { background:var(--table-bg)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important; }
html[data-interface-skin] :where(table.data th,.data-table th,.invoice-line-head) { background:var(--surface-secondary)!important;color:var(--text-muted)!important;border-color:var(--divider)!important; }
html[data-interface-skin] :where(table.data td,.data-table td) { border-color:var(--divider)!important; }
html[data-interface-skin] :where(table.data tr:hover td,.data-table tr:hover td) { background:var(--hover-bg)!important;color:var(--hover-text)!important; }

/* Floating and modal surfaces */
html[data-interface-skin] :where(.pop,.search-panel,.notification-tray,.v3-filter-popover,[role="menu"],.customer-v2-menu) { background:var(--dropdown-bg)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important;box-shadow:var(--shadow-high)!important; }
html[data-interface-skin] :where(.search-item,.menu-item,.notification-row,.v3-filter-option,.customer-v2-menu button):hover { background:var(--hover-bg)!important;color:var(--hover-text)!important; }
html[data-interface-skin] :where(.search-item,.menu-item,.notification-row,.v3-filter-option,.customer-v2-menu button):hover :where(strong,span) { color:var(--hover-text)!important; }
html[data-interface-skin] :where(.search-item,.menu-item,.notification-row,.v3-filter-option,.customer-v2-menu button):hover small { color:var(--hover-muted)!important; }
html[data-interface-skin] :where(.search-item,.menu-item,.notification-row,.v3-filter-option,.customer-v2-menu button):hover :where(svg,[class*="icon"]) { color:var(--hover-icon)!important; }
html[data-interface-skin] :where(.search-item,.menu-item,.notification-row,.v3-filter-option,.customer-v2-menu button):active { background:var(--active-bg)!important;color:var(--active-text)!important; }
html[data-interface-skin] :where(.search-item,.menu-item,.notification-row,.v3-filter-option,.customer-v2-menu button):active :where(strong,span) { color:var(--active-text)!important; }
html[data-interface-skin] :where(.search-item,.menu-item,.notification-row,.v3-filter-option,.customer-v2-menu button):active small { color:var(--active-muted)!important; }
html[data-interface-skin] :where(.search-item,.menu-item,.notification-row,.v3-filter-option,.customer-v2-menu button):active :where(svg,[class*="icon"]) { color:var(--active-icon)!important; }
html[data-interface-skin] :where(.menu-item.danger,.customer-v2-menu button.is-danger):hover { background:var(--status-error-bg)!important;color:var(--status-error)!important; }
html[data-interface-skin] :where(.menu-item.danger,.customer-v2-menu button.is-danger):hover :where(svg,[class*="icon"]) { color:var(--status-error)!important; }

/* Remaining reusable click surfaces. State colors are explicit so descendants
   cannot keep a foreground intended for the previous background. */
html[data-interface-skin] :where(
  .v3-record-button,.v3-click-surface,.v3-row-surface,.v3-filter-trigger,.v3-theme-option,.v3-template-option,.v3-mobile-more-item,
  .v3-data-mode-option,.v5-import-provider,.v5-import-utility-row button,.bc-combobox-option,.ib3-mobile-menu button,
  .v3-composer-menu button,.v5-settings-disclosure>summary,.v5-email-variables button,.v5-export-all,
  .v5-email-template-card,.customer-v2-card-head>.btn,.customers-v2-filter,.customer-v2-timeline>button,
  .v5-import-dropzone,.v5-export-grid>button,.v5-email-template-actions>button,.ib3-mobile-steps button,.bc-combo-trigger,
  .workspace-view-toggle,.ib3-minitab,.ib3-seg,.ib3-step,.ib3-chip-dep,.ib3-customer-edit,.ib3-row-x,.v5-team-remove,.v5-settings-signout
):hover { background:var(--hover-bg)!important;color:var(--hover-text)!important;border-color:var(--border-strong)!important; }
html[data-interface-skin] :where(
  .v3-record-button,.v3-click-surface,.v3-row-surface,.v3-filter-trigger,.v3-theme-option,.v3-template-option,.v3-mobile-more-item,
  .v3-data-mode-option,.v5-import-provider,.v5-import-utility-row button,.bc-combobox-option,.ib3-mobile-menu button,
  .v3-composer-menu button,.v5-settings-disclosure>summary,.v5-email-variables button,.v5-export-all,
  .v5-email-template-card,.customer-v2-card-head>.btn,.customers-v2-filter,.customer-v2-timeline>button,
  .v5-import-dropzone,.v5-export-grid>button,.v5-email-template-actions>button,.ib3-mobile-steps button,.bc-combo-trigger,
  .workspace-view-toggle,.ib3-minitab,.ib3-seg,.ib3-step,.ib3-chip-dep,.ib3-customer-edit,.ib3-row-x,.v5-team-remove,.v5-settings-signout
):hover :where(svg,[class*="icon"]) { color:var(--hover-icon)!important; }
html[data-interface-skin] :where(
  .v3-record-button,.v3-click-surface,.v3-row-surface,.v3-filter-trigger,.v3-theme-option,.v3-template-option,.v3-mobile-more-item,
  .v3-data-mode-option,.v5-import-provider,.v5-import-utility-row button,.bc-combobox-option,.ib3-mobile-menu button,
  .v3-composer-menu button,.v5-settings-disclosure>summary,.v5-email-variables button,.v5-export-all,
  .v5-email-template-card,.customer-v2-card-head>.btn,.customers-v2-filter,.customer-v2-timeline>button,
  .v5-import-dropzone,.v5-export-grid>button,.v5-email-template-actions>button,.ib3-mobile-steps button,.bc-combo-trigger,
  .workspace-view-toggle,.ib3-minitab,.ib3-seg,.ib3-step,.ib3-chip-dep,.ib3-customer-edit,.ib3-row-x,.v5-team-remove,.v5-settings-signout
):hover :where(small,time,[style*="color:var(--text-muted)"],[style*="color:var(--text-subtle)"]) { color:var(--hover-muted)!important; }
html[data-interface-skin] :where(
  .v3-record-button,.v3-click-surface,.v3-row-surface,.v3-filter-trigger,.v3-theme-option,.v3-template-option,.v3-mobile-more-item,
  .v3-data-mode-option,.v5-import-provider,.v5-import-utility-row button,.bc-combobox-option,.ib3-mobile-menu button,
  .v3-composer-menu button,.v5-settings-disclosure>summary,.v5-email-variables button,.v5-export-all,
  .v5-email-template-card,.customer-v2-card-head>.btn,.customers-v2-filter,.customer-v2-timeline>button,
  .v5-import-dropzone,.v5-export-grid>button,.v5-email-template-actions>button,.ib3-mobile-steps button,.bc-combo-trigger,
  .workspace-view-toggle,.ib3-minitab,.ib3-seg,.ib3-step,.ib3-chip-dep,.ib3-customer-edit,.ib3-row-x,.v5-team-remove,.v5-settings-signout
):active { background:var(--active-bg)!important;color:var(--active-text)!important; }
html[data-interface-skin] :where(
  .v3-filter-option[aria-selected="true"],.customers-v2-filter[aria-pressed="true"],.v3-data-mode-option.is-selected,
  .v5-email-template-card.is-active,.v3-mobile-more-item.active,.workspace-view-toggle-option.is-active
) { background:var(--selected-bg)!important;color:var(--selected-text)!important; }
html[data-interface-skin] :where(
  .v3-filter-option[aria-selected="true"],.customers-v2-filter[aria-pressed="true"],.v3-data-mode-option.is-selected,
  .v5-email-template-card.is-active,.v3-mobile-more-item.active,.workspace-view-toggle-option.is-active
) :where(svg,[class*="icon"]) { color:var(--selected-icon)!important; }
html[data-interface-skin] :where(
  .v3-filter-option[aria-selected="true"],.customers-v2-filter[aria-pressed="true"],.v3-data-mode-option.is-selected,
  .v5-email-template-card.is-active,.v3-mobile-more-item.active,.workspace-view-toggle-option.is-active
) small { color:var(--selected-muted)!important; }
html[data-interface-skin] :where([aria-selected="true"],[aria-pressed="true"],.is-selected,.is-active,.active)
  :where([style*="color:var(--text-muted)"],[style*="color:var(--text-subtle)"]) { color:var(--selected-muted)!important; }

/* Persistent selection hierarchy. These rules intentionally follow every
   reusable hover/active rule so a selected control can never collapse back
   into the same treatment as an unselected item under the pointer. */
html[data-interface-skin] :where(
  .v4-chip.is-on,.v4-chip[aria-pressed="true"],
  .customers-v2-filter.is-active,.customers-v2-filter[aria-pressed="true"],
  .customer-v2-segmented button.is-active,.v5-email-template-tabs button.is-active,
  .v3-filter-option.is-selected,.v3-filter-option[aria-selected="true"],
  .v3-customer-popup .tab.active,.v3-customer-popup .tab[aria-selected="true"]
) {
  background:var(--selected-bg)!important;
  color:var(--selected-text)!important;
  border-color:var(--selected-icon)!important;
  box-shadow:var(--shadow-low)!important;
}
html[data-interface-skin] :where(
  .v4-chip.is-on,.v4-chip[aria-pressed="true"],
  .customers-v2-filter.is-active,.customers-v2-filter[aria-pressed="true"],
  .customer-v2-segmented button.is-active,.v5-email-template-tabs button.is-active,
  .v3-filter-option.is-selected,.v3-filter-option[aria-selected="true"],
  .v3-customer-popup .tab.active,.v3-customer-popup .tab[aria-selected="true"]
) :where(svg,[class*="icon"],.v3-filter-check) { color:var(--selected-icon)!important; }

html[data-interface-skin] :where(
  .v3-template-option.is-selected,.v3-template-option[aria-checked="true"],
  .v3-data-mode-option.is-selected,.v3-data-mode-option[aria-checked="true"],
  .v5-email-template-card.is-active,.v5-email-template-card[aria-selected="true"]
) {
  background:var(--selected-bg)!important;
  color:var(--selected-text)!important;
  border-color:var(--selected-icon)!important;
  box-shadow:var(--shadow-low)!important;
}
html[data-interface-skin] :where(
  .v3-template-option.is-selected,.v3-template-option[aria-checked="true"],
  .v3-data-mode-option.is-selected,.v3-data-mode-option[aria-checked="true"],
  .v5-email-template-card.is-active,.v5-email-template-card[aria-selected="true"]
) :where(strong,.v5-email-card-state) { color:var(--selected-text)!important; }
html[data-interface-skin] :where(
  .v3-template-option.is-selected,.v3-template-option[aria-checked="true"],
  .v3-data-mode-option.is-selected,.v3-data-mode-option[aria-checked="true"],
  .v5-email-template-card.is-active,.v5-email-template-card[aria-selected="true"]
) small { color:var(--selected-muted)!important; }

html[data-interface-skin] .v3-theme-option.is-selected {
  background:color-mix(in srgb,var(--theme-color) 10%,var(--surface-primary))!important;
  border-color:var(--theme-color)!important;
  box-shadow:var(--shadow-low)!important;
}
html[data-interface-skin] .v3-theme-option.is-selected .v3-theme-check { background:var(--theme-color)!important;color:var(--theme-on)!important; }

html[data-interface-skin] .workspace-view-toggle .workspace-view-toggle-option.is-active {
  background:var(--selected-bg)!important;
  color:var(--selected-icon)!important;
  box-shadow:var(--shadow-low)!important;
}
html[data-interface-skin] .workspace-view-toggle .workspace-view-toggle-option.is-active svg { color:var(--selected-icon)!important; }

html[data-interface-skin] .v5-settings-nav-item.is-active {
  background:var(--settings-selected-bg,var(--selected-bg))!important;
  color:var(--settings-selected-text,var(--selected-text))!important;
  border-color:var(--selected-icon)!important;
  box-shadow:var(--shadow-low)!important;
}
html[data-interface-skin] .v5-settings-nav-item.is-active:hover { background:var(--settings-selected-bg,var(--selected-bg))!important;color:var(--settings-selected-text,var(--selected-text))!important; }
html[data-interface-skin] .v5-settings-nav-item.is-active :where(.v5-settings-nav-icon,.v5-settings-nav-icon svg) { color:var(--selected-icon)!important; }
html[data-interface-skin] .v5-settings-nav-item.is-active small { color:var(--selected-muted)!important; }

/* Page tabs use a persistent underline rather than a filled segmented state. */
html[data-interface-skin] .customer-v2-tabs button[aria-selected="true"],
html[data-interface-skin] .customer-v2-tabs button.is-active {
  background:transparent!important;
  color:var(--selected-text)!important;
  box-shadow:none!important;
}
html[data-interface-skin] .customer-v2-tabs button[aria-selected="true"] :where(svg,[class*="icon"]),
html[data-interface-skin] .customer-v2-tabs button.is-active :where(svg,[class*="icon"]) { color:var(--selected-icon)!important; }
html[data-interface-skin] .customer-v2-tabs button[aria-selected="true"]:after,
html[data-interface-skin] .customer-v2-tabs button.is-active:after { height:3px!important;background:var(--selected-icon)!important;opacity:1!important; }

/* A selected control remains visibly selected while pressed, but the stronger
   pressed palette and tactile movement provide immediate click/tap feedback. */
html[data-interface-skin] :where(
  .v4-chip.is-on,.v4-chip[aria-pressed="true"],.customers-v2-filter[aria-pressed="true"],
  .customer-v2-segmented button.is-active,.v5-email-template-tabs button.is-active,
  .v3-filter-option[aria-selected="true"],.v3-template-option[aria-checked="true"],
  .v3-data-mode-option[aria-checked="true"],.v5-email-template-card[aria-selected="true"],
  .v3-customer-popup .tab[aria-selected="true"],.workspace-view-toggle-option.is-active,
  .v5-settings-nav-item.is-active
):active {
  background:var(--selected-pressed-bg)!important;
  color:var(--selected-pressed-text)!important;
  border-color:var(--selected-pressed-icon)!important;
  box-shadow:var(--shadow-low)!important;
}
html[data-interface-skin] :where(
  .v4-chip.is-on,.v4-chip[aria-pressed="true"],.customers-v2-filter[aria-pressed="true"],
  .customer-v2-segmented button.is-active,.v5-email-template-tabs button.is-active,
  .v3-filter-option[aria-selected="true"],.v3-template-option[aria-checked="true"],
  .v3-data-mode-option[aria-checked="true"],.v5-email-template-card[aria-selected="true"],
  .v3-customer-popup .tab[aria-selected="true"],.workspace-view-toggle-option.is-active,
  .v5-settings-nav-item.is-active
):active :where(svg,[class*="icon"],small,.v3-filter-check) { color:var(--selected-pressed-icon)!important; }
html[data-interface-skin] .v3-theme-option.is-selected:active {
  background:color-mix(in srgb,var(--theme-color) 18%,var(--surface-primary))!important;
  border-color:var(--theme-color)!important;
  box-shadow:var(--shadow-low)!important;
}
html[data-interface-skin] .customer-v2-tabs button[aria-selected="true"]:active,
html[data-interface-skin] .customer-v2-tabs button.is-active:active {
  background:color-mix(in srgb,var(--selected-pressed-bg) 46%,transparent)!important;
  color:var(--selected-pressed-text)!important;
  box-shadow:none!important;
}

/* Anthropic's visible control accent is the exact Claude coral. Darker coral
   tokens remain reserved for normal-size text that requires AA contrast. */
html[data-interface-skin="anthropic"] :where(
  .v4-chip.is-on,.v4-chip[aria-pressed="true"],
  .customers-v2-filter.is-active,.customers-v2-filter[aria-pressed="true"],
  .customer-v2-segmented button.is-active,.v5-email-template-tabs button.is-active,
  .v3-filter-option.is-selected,.v3-filter-option[aria-selected="true"],
  .v3-customer-popup .tab.active,.v3-customer-popup .tab[aria-selected="true"],
  .v3-template-option.is-selected,.v3-template-option[aria-checked="true"],
  .v3-data-mode-option.is-selected,.v3-data-mode-option[aria-checked="true"],
  .v5-email-template-card.is-active,.v5-email-template-card[aria-selected="true"],
  .workspace-view-toggle .workspace-view-toggle-option.is-active,
  .v5-settings-nav-item.is-active
) { border-color:var(--brand-accent)!important; }
html[data-interface-skin="anthropic"] :where(
  .v4-chip.is-on,.v4-chip[aria-pressed="true"],
  .customers-v2-filter.is-active,.customers-v2-filter[aria-pressed="true"],
  .customer-v2-segmented button.is-active,.v5-email-template-tabs button.is-active,
  .v3-filter-option.is-selected,.v3-filter-option[aria-selected="true"],
  .v3-customer-popup .tab.active,.v3-customer-popup .tab[aria-selected="true"],
  .v3-template-option.is-selected,.v3-template-option[aria-checked="true"],
  .v3-data-mode-option.is-selected,.v3-data-mode-option[aria-checked="true"],
  .v5-email-template-card.is-active,.v5-email-template-card[aria-selected="true"],
  .workspace-view-toggle .workspace-view-toggle-option.is-active,
  .v5-settings-nav-item.is-active
) :where(svg,[class*="icon"],.v3-filter-check) { color:var(--brand-accent)!important; }
html[data-interface-skin="anthropic"] .customer-v2-tabs button[aria-selected="true"]:after,
html[data-interface-skin="anthropic"] .customer-v2-tabs button.is-active:after { background:var(--brand-accent)!important; }

html[data-interface-skin] :where(
  .v4-chip.is-on,.v4-chip[aria-pressed="true"],.customers-v2-filter[aria-pressed="true"],
  .customer-v2-segmented button.is-active,.v3-filter-option[aria-selected="true"],
  .v3-template-option[aria-checked="true"],.v3-data-mode-option[aria-checked="true"],
  .v3-theme-option[aria-checked="true"],.v5-email-template-card[aria-selected="true"],
  .v3-customer-popup .tab[aria-selected="true"]
):focus-visible { outline:3px solid var(--focus-outline)!important;outline-offset:2px!important; }
html[data-interface-skin] :where(.modal,.v3-modal-panel,.v5-import-modal,.v3-mobile-more-sheet,.ib3-sheet) { background:var(--modal-bg)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important;box-shadow:var(--shadow-high)!important; }
html[data-interface-skin] :where(.v3-modal-backdrop,.modal-backdrop,.v3-mobile-more-scrim) { background:var(--backdrop-bg)!important; }
html[data-interface-skin] :where(.v5-import-backdrop,.v3-customer-scrim,.ib3-mobile-menu-scrim,.v3-composer-menu-scrim,.ib3-template-sheet-scrim) { background:var(--backdrop-bg)!important; }
html[data-interface-skin] .toast { background:var(--surface-elevated)!important;color:var(--text-primary)!important;border:1px solid var(--border-default)!important;box-shadow:var(--shadow-high)!important; }
html[data-interface-skin] .notif-count { background:var(--status-error)!important;color:var(--status-error-on)!important; }
html[data-interface-skin] .v5-email-friendly-note>span { background:var(--status-success)!important;color:var(--status-success-on)!important; }
html[data-interface-skin] :where(.nav-tooltip,[role="tooltip"]) { background:var(--tooltip-bg)!important;color:var(--tooltip-text)!important;box-shadow:var(--shadow-high)!important; }

/* Status semantics */
html[data-interface-skin] :where(.v5-status-pill,.customers-v2-health,.badge) { font-family:var(--status-pill-font,var(--font-ui))!important;font-weight:var(--status-pill-weight,850)!important;letter-spacing:var(--status-pill-letter-spacing,.02em)!important; }
html[data-interface-skin] :where(.customers-v2-health.is-current,.customers-v2-health.paid,.customers-v2-health.approved,.badge.success,.tint-lime) { background:var(--status-success-bg)!important;color:var(--status-success)!important; }
html[data-interface-skin] :where(.customers-v2-health.is-attention,.customers-v2-health.partial,.badge.warning,.tint-amber) { background:var(--status-warning-bg)!important;color:var(--status-warning)!important; }
html[data-interface-skin] :where(.customers-v2-health.is-overdue,.customers-v2-health.overdue,.badge.error,.tint-coral) { background:var(--status-error-bg)!important;color:var(--status-error)!important; }
html[data-interface-skin] :where(.customers-v2-health.sent,.customers-v2-health.viewed,.badge.info,.tint-violet) { background:var(--status-info-bg)!important;color:var(--status-info)!important; }
html[data-interface-skin] :where(.v3-inline-alert[data-tone="success"],.v5-email-friendly-note,.v5-email-ready-badge,.v5-email-safe-save) { background:var(--status-success-bg)!important;color:var(--status-success)!important;border-color:color-mix(in srgb,var(--status-success) 28%,var(--border-default))!important; }
html[data-interface-skin] :where(.v3-inline-alert[data-tone="danger"],.v5-import-error,.v5-receipt-action.is-danger) { background:var(--status-error-bg)!important;color:var(--status-error)!important;border-color:color-mix(in srgb,var(--status-error) 28%,var(--border-default))!important; }
html[data-interface-skin] :where(.v5-import-warnings) { background:var(--status-warning-bg)!important;color:var(--status-warning)!important;border-color:color-mix(in srgb,var(--status-warning) 28%,var(--border-default))!important; }
html[data-interface-skin] :where(.v3-workflow-notice.viewed) { background:var(--status-info-bg)!important;color:var(--status-info)!important;border-color:color-mix(in srgb,var(--status-info) 28%,var(--border-default))!important; }
html[data-interface-skin] .customer-v2-summary .customer-v2-metrics>div.is-urgent { background:color-mix(in srgb,var(--status-error-bg) 72%,var(--card-bg))!important;border-color:color-mix(in srgb,var(--status-error) 24%,var(--border-default))!important; }

/* Accent-backed glyphs must use a foreground chosen for that skin's accent. */
html[data-interface-skin] :where(
  .v3-themed-avatar,
  .v3-template-option.is-selected .v3-template-choice,
  .v3-mobile-more-item.active .v3-mobile-more-icon,
  .v3-data-mode-option.is-selected .v3-data-mode-icon,
  .v5-import-plan>svg,
  .v5-settings-account-avatar
) {
  background:var(--selected-icon)!important;
  color:var(--text-inverse)!important;
  border-color:var(--selected-icon)!important;
}
html[data-interface-skin] .v3-mobile-more-close:hover,
html[data-interface-skin] .v3-mobile-more-close:focus-visible {
  background:var(--action-primary)!important;
  color:var(--action-primary-text)!important;
  border-color:var(--action-primary)!important;
}
html[data-interface-skin] .customer-v2-summary .is-urgent :where(.customer-v2-metric-value,small) { color:var(--status-error)!important; }

/* Icons inherit hierarchy unless a component intentionally supplies a status. */
html[data-interface-skin] :where(.nav-ico,.v5-settings-nav-icon,.customer-v2-detail-icon,.customer-v2-tab-icon) { color:var(--icon-muted); }
html[data-interface-skin] .nav-item.active .nav-ico { color:var(--sidebar-selected-icon)!important; }
html[data-interface-skin] .v5-settings-nav-item.is-active .v5-settings-nav-icon { color:var(--selected-icon)!important; }

html[data-interface-skin="anthropic"] .v5-settings-nav-item.is-active { border-color:var(--brand-accent)!important; }
html[data-interface-skin="anthropic"] .v5-settings-nav-item.is-active .v5-settings-nav-icon { color:var(--brand-accent)!important; }
html[data-interface-skin="vercel"] .sidebar :is(.invoice-flow-mark__bar--neutral,.invoice-flow-mark__bar--accent) { fill:var(--text-primary)!important; }