/* Soft UI is a button material. Palette, layout, field and menu styles retain
   their own tokens. Mobile copies are generated by generate-theme-palettes.mjs. */
:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"] {
  --surux-soft-ui-dark: rgba(0, 0, 0, .42);
  --surux-soft-ui-light: rgba(255, 255, 255, .065);
  --surux-soft-ui-standard-bg: color-mix(in srgb, var(--surux-primary-action-bg) 60%, #fff 40%);
  --surux-soft-ui-overlay: linear-gradient(145deg, rgba(255, 255, 255, .055), transparent 48%, rgba(0, 0, 0, .04));
  --surux-soft-ui-rest-shadow: 5px 7px 14px var(--surux-soft-ui-dark), -4px -4px 12px var(--surux-soft-ui-light);
  --surux-soft-ui-hover-shadow: 6px 9px 17px var(--surux-soft-ui-dark), -4px -4px 13px var(--surux-soft-ui-light);
  --surux-soft-ui-pressed-shadow: 1px 1px 2px var(--surux-soft-ui-dark), inset 3px 3px 6px rgba(0, 0, 0, .30), inset -2px -2px 5px rgba(255, 255, 255, .12);
}

/* A lighter palette fill gives Standard its own colour alongside Action.
   Dark ink stays readable on this tint in both light and dark workspaces. */
:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"]
.surux-button-tone-standard:not(:where(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted, .surux-command-button-subtle-surface, .surux-command-overflow-trigger-icon-only-subtle, .surux-map-tracker-utility-action, .surux-hero-action-flyout *, .surux-command-overflow-panel *, .surux-button-pressed, [aria-pressed="true"], [aria-expanded="true"], .active)) {
  --surux-button-bg: var(--surux-soft-ui-standard-bg);
  --surux-button-fg: #0f172a;
}

/* The solid palette tones need the same gentle upper highlight as the other
   tones. Fade it above the label instead of adding another border or rim. */
:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"]
:is(.surux-button-tone-standard, .surux-button-tone-action, .primary-button):not(:where(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted, .surux-command-button-subtle-surface, .surux-command-overflow-trigger-icon-only-subtle, .surux-map-tracker-utility-action, .surux-hero-action-flyout *, .surux-command-overflow-panel *)) {
  --surux-soft-ui-overlay: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .055) 24%, transparent 58%, rgba(0, 0, 0, .02));
}

:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"][data-bs-theme="light"] {
  --surux-soft-ui-dark: rgba(119, 131, 147, .38);
  --surux-soft-ui-light: rgba(255, 255, 255, .90);
  --surux-soft-ui-rest-shadow: 5px 7px 14px var(--surux-soft-ui-dark), -4px -4px 12px var(--surux-soft-ui-light);
  --surux-soft-ui-hover-shadow: 6px 9px 17px var(--surux-soft-ui-dark), -4px -4px 13px var(--surux-soft-ui-light);
  --surux-soft-ui-pressed-shadow: 1px 1px 2px var(--surux-soft-ui-dark), inset 3px 3px 6px rgba(119, 131, 147, .32), inset -2px -2px 5px rgba(255, 255, 255, .50);
}

/* The exclusions keep intentionally quiet toolbar and flyout controls quiet. */
.surux-user-preference-preview[data-surux-button-style="soft-ui"] .surux-user-preference-preview-command-actions button,
:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"]
:is(.btn:not(.btn-close), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close, .primary-button, .secondary-button, .theme-button, .segmented-control-button, .technical-request-inline-button, .technical-request-icon-action, .connect-back-button):not(:where(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted, .surux-command-button-subtle-surface, .surux-command-overflow-trigger-icon-only-subtle, .surux-map-tracker-utility-action, .surux-hero-action-flyout *, .surux-command-overflow-panel *)) {
  --surux-button-composed-bg: var(--surux-soft-ui-overlay), var(--surux-button-bg, var(--surux-surface-2));
  --surux-button-icon-bg: transparent;
  --surux-button-icon-border: transparent;
  border-color: transparent !important;
  border-radius: var(--surux-button-radius-soft-ui, var(--surux-button-radius, 999px)) !important;
  background: var(--surux-soft-ui-disabled-bg, var(--surux-button-composed-bg)) !important;
  color: var(--surux-soft-ui-disabled-ink, var(--surux-button-fg, var(--surux-text))) !important;
  box-shadow: var(--surux-soft-ui-shadow, var(--surux-button-elevation-soft-ui, var(--surux-soft-ui-rest-shadow))) !important;
  -webkit-backdrop-filter: var(--surux-button-blur-soft-ui, none) !important;
  backdrop-filter: var(--surux-button-blur-soft-ui, none) !important;
  filter: none !important;
  transform: translateY(var(--surux-soft-ui-lift, 0px)) !important;
  transition: var(--surux-soft-ui-transition, transform 170ms ease, box-shadow 170ms ease) !important;
}

/* One continuous shaded edge: no glass reflection or second inset rim. */
:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"]
:is(.btn:not(.btn-close), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close, .primary-button, .secondary-button, .theme-button, .segmented-control-button, .technical-request-inline-button, .technical-request-icon-action, .connect-back-button):not(:where(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted, .surux-command-button-subtle-surface, .surux-command-overflow-trigger-icon-only-subtle, .surux-map-tracker-utility-action, .surux-hero-action-flyout *, .surux-command-overflow-panel *))::before,
:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"]
:is(.btn:not(.btn-close):not(.dropdown-toggle), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close, .primary-button, .secondary-button, .theme-button, .segmented-control-button, .technical-request-inline-button, .technical-request-icon-action, .connect-back-button):not(:where(.dropdown-toggle, .surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted, .surux-command-button-subtle-surface, .surux-command-overflow-trigger-icon-only-subtle, .surux-map-tracker-utility-action, .surux-hero-action-flyout *, .surux-command-overflow-panel *))::after {
  content: none !important;
}

.surux-user-preference-preview[data-surux-button-style="soft-ui"] .surux-user-preference-preview-command-actions button:first-child {
  --surux-button-bg: var(--surux-primary-action-bg);
  --surux-button-fg: var(--surux-primary-contrast);
}

:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"]
:is(.surux-button, .surux-command-button):not(:where(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted, .surux-command-button-subtle-surface, .surux-map-tracker-utility-action, .surux-hero-action-flyout *, .surux-command-overflow-panel *)) .surux-command-button-icon {
  width: 1.1rem !important;
  height: 1.1rem !important;
  flex: 0 0 1.1rem !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* State variables only affect the eligible buttons above. They leave native
   fields, dropdown arrows and compact custom controls unchanged. */
@media (hover: hover) {
  :is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"]
  :is(button, a, summary, input, .btn, .surux-button, .surux-command-button):hover {
    --surux-soft-ui-shadow: var(--surux-soft-ui-hover-shadow);
    --surux-soft-ui-lift: -1px;
  }
}

:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"]
:is(button, a, summary, input, .btn, .surux-button, .surux-command-button):focus-visible {
  --surux-soft-ui-shadow: var(--surux-soft-ui-hover-shadow);
  --surux-soft-ui-lift: -1px;
}

:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"]
:is(button, a, summary, input, .btn, .surux-button, .surux-command-button):is(:active, [aria-pressed="true"], [aria-expanded="true"], .surux-button-pressed, .active) {
  --surux-soft-ui-shadow: var(--surux-soft-ui-pressed-shadow);
  --surux-soft-ui-overlay: linear-gradient(145deg, rgba(0, 0, 0, .09), transparent 70%);
  --surux-soft-ui-lift: 1px;
}

:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"]
:is(button, a, summary, input, .btn, .surux-button, .surux-command-button):is(:disabled, .disabled, [aria-disabled="true"]) {
  --surux-soft-ui-disabled-bg: var(--surux-disabled-control-bg, var(--surux-surface-2));
  --surux-soft-ui-disabled-ink: var(--surux-disabled-control-color, var(--surux-muted, var(--surux-text)));
  --surux-soft-ui-shadow: none;
  --surux-soft-ui-lift: 0px;
}

/* Muted colours already communicate disabled state; fading the whole button
   again destroys label contrast, especially on Charcoal. */
:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"]
:is(.btn:not(.btn-close), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close, .primary-button, .secondary-button, .theme-button, .segmented-control-button, .technical-request-inline-button, .technical-request-icon-action, .connect-back-button):not(:where(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted, .surux-command-button-subtle-surface, .surux-command-overflow-trigger-icon-only-subtle, .surux-map-tracker-utility-action, .surux-hero-action-flyout *, .surux-command-overflow-panel *)):is(:disabled, .disabled, [aria-disabled="true"]) {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"] {
    --surux-soft-ui-transition: none;
  }
  :is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"]
  :is(button, a, summary, input, .btn, .surux-button, .surux-command-button) {
    --surux-soft-ui-lift: 0px !important;
  }
}

/* Navy on Light and Warm Light mixes Standard to #6d7c8f. #0f172a is 4.19:1; #000 is 4.93:1. */
:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"]:is([data-bs-theme="light"], [data-surux-appearance="warm-light"])[data-surux-theme="navy"]:not(:is([data-surux-colour-style="vivid"], [data-surux-colour-style="neon"]))
.surux-button-tone-standard:not(:where(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted, .surux-command-button-subtle-surface, .surux-command-overflow-trigger-icon-only-subtle, .surux-map-tracker-utility-action, .surux-hero-action-flyout *, .surux-command-overflow-panel *, .surux-button-pressed, [aria-pressed="true"], [aria-expanded="true"], .active)) {
  --surux-button-fg: #000000;
}

/* Modal and toast close stay the quiet disc the component already paints.
   Weight matches the material rule above so the muted colour wins, not only the shadow variable. */
:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"] :is(.btn.surux-modal-close, .btn.surux-toast-close) {
  --surux-soft-ui-lift: 0px;
  --surux-soft-ui-shadow: none;
  border-color: transparent !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--surux-muted) 82%, var(--surux-text) 18%) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
:is(html, .surux-mobile-root, [data-surux-preference-preview])[data-surux-button-style="soft-ui"] :is(.surux-modal-close, .surux-toast-close):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--surux-border) 72%, transparent) !important;
  background: color-mix(in srgb, var(--surux-surface-2) 74%, transparent) !important;
  color: var(--surux-text) !important;
  box-shadow: none !important;
  transform: none !important;
}