/* hx-button.css — Button family SSOT (Aggregation Pilot)
 * Level 1: button.css
 * Level 2 covered (aggregated): button, button-link, button-social, button-toggle, button-icon, button-product-card, icon-button, icon-button-floating, icon-button-link
 * Token-driven only. No. No fallbacks.
 * 4-variant system: light-desktop, light-mobile, dark-desktop, dark-mobile via data-theme + data-hx-vp tokens.
 * Variant PHP directories retained for URL routing and view ownership.
 * Shared base + modifiers live here. See variants/ for optional view-logic stubs.
 */

/* hx-button.css — Button SSOT
 * Base for: button, button-link, button-social, button-toggle, button-icon, button-product-card
 * Token-driven. Pill radius via --radius-full.
 */

/* Base button — token-driven */
.hx-app .ws-button,
.hx-app .hx-btn,
.ws-button,
.hx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-height: var(--btn-height-md);
  padding-inline: var(--density-control-pad-x);
  background: var(--btn-bg);
  color: var(--btn-fg);
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--btn-font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

/* Disabled / loading shared */
.ws-button:disabled,
.hx-btn:disabled,
.ws-button.is-disabled,
.hx-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.ws-button.is-loading,
.hx-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.ws-button.is-loading::after,
.hx-btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: hx-spin 0.6s linear infinite;
}

/* Block */
.ws-button--block,
.hx-btn--block {
  width: 100%;
}

/* Icon start */
.hx-btn__icon-start {
  display: inline-flex;
  align-items: center;
  margin-inline-end: var(--spacing-2);
}

/* ========== LIGHT DESKTOP ========== */
html[data-theme="light"][data-hx-vp="desktop"] .hx-app .ws-button--primary,
html[data-theme="light"][data-hx-vp="desktop"] .ws-button--primary,
html[data-theme="light"][data-hx-vp="desktop"] .hx-btn--primary {
  --btn-bg: var(--hx-primary);
  --btn-fg: var(--hx-on-primary);
}
html[data-theme="light"][data-hx-vp="desktop"] .ws-button--primary:hover,
html[data-theme="light"][data-hx-vp="desktop"] .hx-btn--primary:hover {
  --btn-bg: color-mix(in srgb, var(--hx-primary) 85%, var(--hx-fg));
}

html[data-theme="light"][data-hx-vp="desktop"] .ws-button--secondary,
html[data-theme="light"][data-hx-vp="desktop"] .hx-btn--secondary {
  --btn-bg: var(--hx-surface-subtle);
  --btn-fg: var(--hx-fg);
}
html[data-theme="light"][data-hx-vp="desktop"] .ws-button--secondary:hover,
html[data-theme="light"][data-hx-vp="desktop"] .hx-btn--secondary:hover {
  --btn-bg: color-mix(in srgb, var(--hx-surface-subtle) 85%, var(--hx-fg));
}

html[data-theme="light"][data-hx-vp="desktop"] .ws-button--tertiary,
html[data-theme="light"][data-hx-vp="desktop"] .hx-btn--tertiary {
  --btn-bg: transparent;
  --btn-fg: var(--hx-fg);
  text-decoration: underline;
}
html[data-theme="light"][data-hx-vp="desktop"] .ws-button--tertiary:hover,
html[data-theme="light"][data-hx-vp="desktop"] .hx-btn--tertiary:hover {
  --btn-bg: var(--hx-surface-subtle);
}

html[data-theme="light"][data-hx-vp="desktop"] .ws-button--ghost,
html[data-theme="light"][data-hx-vp="desktop"] .hx-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--hx-fg);
}
html[data-theme="light"][data-hx-vp="desktop"] .ws-button--ghost:hover,
html[data-theme="light"][data-hx-vp="desktop"] .hx-btn--ghost:hover {
  --btn-bg: var(--hx-surface-subtle);
}

html[data-theme="light"][data-hx-vp="desktop"] .ws-button--danger,
html[data-theme="light"][data-hx-vp="desktop"] .hx-btn--danger {
  --btn-bg: var(--hx-danger);
  --btn-fg: var(--hx-on-primary);
}
html[data-theme="light"][data-hx-vp="desktop"] .ws-button--danger:hover,
html[data-theme="light"][data-hx-vp="desktop"] .hx-btn--danger:hover {
  --btn-bg: color-mix(in srgb, var(--hx-danger) 85%, var(--hx-fg));
}

/* ========== LIGHT MOBILE ========== */
html[data-theme="light"][data-hx-vp="mobile"] .ws-button,
html[data-theme="light"][data-hx-vp="mobile"] .hx-btn {
  min-height: var(--density-control-height-compact);
  padding-inline: var(--density-control-pad-x-compact);
}
/* Mobile reuses light desktop color tokens (same semantic) */
html[data-theme="light"][data-hx-vp="mobile"] .ws-button--primary,
html[data-theme="light"][data-hx-vp="mobile"] .hx-btn--primary {
  --btn-bg: var(--hx-primary);
  --btn-fg: var(--hx-on-primary);
}
html[data-theme="light"][data-hx-vp="mobile"] .ws-button--primary:hover,
html[data-theme="light"][data-hx-vp="mobile"] .hx-btn--primary:hover {
  --btn-bg: color-mix(in srgb, var(--hx-primary) 85%, var(--hx-fg));
}
/* (repeat pattern for secondary, tertiary, ghost, danger — abbreviated for brevity; full set follows same light rules) */
html[data-theme="light"][data-hx-vp="mobile"] .ws-button--secondary,
html[data-theme="light"][data-hx-vp="mobile"] .hx-btn--secondary {
  --btn-bg: var(--hx-surface-subtle);
  --btn-fg: var(--hx-fg);
}
html[data-theme="light"][data-hx-vp="mobile"] .ws-button--secondary:hover,
html[data-theme="light"][data-hx-vp="mobile"] .hx-btn--secondary:hover {
  --btn-bg: color-mix(in srgb, var(--hx-surface-subtle) 85%, var(--hx-fg));
}
html[data-theme="light"][data-hx-vp="mobile"] .ws-button--tertiary,
html[data-theme="light"][data-hx-vp="mobile"] .hx-btn--tertiary {
  --btn-bg: transparent;
  --btn-fg: var(--hx-fg);
  text-decoration: underline;
}
html[data-theme="light"][data-hx-vp="mobile"] .ws-button--tertiary:hover,
html[data-theme="light"][data-hx-vp="mobile"] .hx-btn--tertiary:hover {
  --btn-bg: var(--hx-surface-subtle);
}
html[data-theme="light"][data-hx-vp="mobile"] .ws-button--ghost,
html[data-theme="light"][data-hx-vp="mobile"] .hx-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--hx-fg);
}
html[data-theme="light"][data-hx-vp="mobile"] .ws-button--ghost:hover,
html[data-theme="light"][data-hx-vp="mobile"] .hx-btn--ghost:hover {
  --btn-bg: var(--hx-surface-subtle);
}
html[data-theme="light"][data-hx-vp="mobile"] .ws-button--danger,
html[data-theme="light"][data-hx-vp="mobile"] .hx-btn--danger {
  --btn-bg: var(--hx-danger);
  --btn-fg: var(--hx-on-primary);
}
html[data-theme="light"][data-hx-vp="mobile"] .ws-button--danger:hover,
html[data-theme="light"][data-hx-vp="mobile"] .hx-btn--danger:hover {
  --btn-bg: color-mix(in srgb, var(--hx-danger) 85%, var(--hx-fg));
}

/* ========== DARK DESKTOP ========== */
html[data-theme="dark"][data-hx-vp="desktop"] .ws-button--primary,
html[data-theme="dark"][data-hx-vp="desktop"] .hx-btn--primary {
  --btn-bg: var(--hx-primary);
  --btn-fg: var(--hx-on-primary);
}
html[data-theme="dark"][data-hx-vp="desktop"] .ws-button--primary:hover,
html[data-theme="dark"][data-hx-vp="desktop"] .hx-btn--primary:hover {
  --btn-bg: color-mix(in srgb, var(--hx-primary) 85%, var(--hx-fg));
}

html[data-theme="dark"][data-hx-vp="desktop"] .ws-button--secondary,
html[data-theme="dark"][data-hx-vp="desktop"] .hx-btn--secondary {
  --btn-bg: var(--hx-surface-subtle);
  --btn-fg: var(--hx-fg);
}
html[data-theme="dark"][data-hx-vp="desktop"] .ws-button--secondary:hover,
html[data-theme="dark"][data-hx-vp="desktop"] .hx-btn--secondary:hover {
  --btn-bg: color-mix(in srgb, var(--hx-surface-subtle) 85%, var(--hx-fg));
}

html[data-theme="dark"][data-hx-vp="desktop"] .ws-button--tertiary,
html[data-theme="dark"][data-hx-vp="desktop"] .hx-btn--tertiary {
  --btn-bg: transparent;
  --btn-fg: var(--hx-on-primary);
  text-decoration: underline;
}
html[data-theme="dark"][data-hx-vp="desktop"] .ws-button--tertiary:hover,
html[data-theme="dark"][data-hx-vp="desktop"] .hx-btn--tertiary:hover {
  --btn-bg: var(--hx-surface-subtle);
  --btn-fg: var(--hx-fg);
}

html[data-theme="dark"][data-hx-vp="desktop"] .ws-button--ghost,
html[data-theme="dark"][data-hx-vp="desktop"] .hx-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--hx-on-primary);
}
html[data-theme="dark"][data-hx-vp="desktop"] .ws-button--ghost:hover,
html[data-theme="dark"][data-hx-vp="desktop"] .hx-btn--ghost:hover {
  --btn-bg: var(--hx-surface-subtle);
  --btn-fg: var(--hx-fg);
}

html[data-theme="dark"][data-hx-vp="desktop"] .ws-button--danger,
html[data-theme="dark"][data-hx-vp="desktop"] .hx-btn--danger {
  --btn-bg: var(--hx-danger);
  --btn-fg: var(--hx-on-primary);
}
html[data-theme="dark"][data-hx-vp="desktop"] .ws-button--danger:hover,
html[data-theme="dark"][data-hx-vp="desktop"] .hx-btn--danger:hover {
  --btn-bg: color-mix(in srgb, var(--hx-danger) 85%, var(--hx-fg));
}

/* ========== DARK MOBILE ========== */
html[data-theme="dark"][data-hx-vp="mobile"] .ws-button,
html[data-theme="dark"][data-hx-vp="mobile"] .hx-btn {
  min-height: var(--density-control-height-compact);
  padding-inline: var(--density-control-pad-x-compact);
}
html[data-theme="dark"][data-hx-vp="mobile"] .ws-button--primary,
html[data-theme="dark"][data-hx-vp="mobile"] .hx-btn--primary {
  --btn-bg: var(--hx-primary);
  --btn-fg: var(--hx-on-primary);
}
html[data-theme="dark"][data-hx-vp="mobile"] .ws-button--primary:hover,
html[data-theme="dark"][data-hx-vp="mobile"] .hx-btn--primary:hover {
  --btn-bg: color-mix(in srgb, var(--hx-primary) 85%, var(--hx-fg));
}
html[data-theme="dark"][data-hx-vp="mobile"] .ws-button--secondary,
html[data-theme="dark"][data-hx-vp="mobile"] .hx-btn--secondary {
  --btn-bg: var(--hx-surface-subtle);
  --btn-fg: var(--hx-fg);
}
html[data-theme="dark"][data-hx-vp="mobile"] .ws-button--secondary:hover,
html[data-theme="dark"][data-hx-vp="mobile"] .hx-btn--secondary:hover {
  --btn-bg: color-mix(in srgb, var(--hx-surface-subtle) 85%, var(--hx-fg));
}
html[data-theme="dark"][data-hx-vp="mobile"] .ws-button--tertiary,
html[data-theme="dark"][data-hx-vp="mobile"] .hx-btn--tertiary {
  --btn-bg: transparent;
  --btn-fg: var(--hx-on-primary);
  text-decoration: underline;
}
html[data-theme="dark"][data-hx-vp="mobile"] .ws-button--tertiary:hover,
html[data-theme="dark"][data-hx-vp="mobile"] .hx-btn--tertiary:hover {
  --btn-bg: var(--hx-surface-subtle);
  --btn-fg: var(--hx-fg);
}
html[data-theme="dark"][data-hx-vp="mobile"] .ws-button--ghost,
html[data-theme="dark"][data-hx-vp="mobile"] .hx-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--hx-on-primary);
}
html[data-theme="dark"][data-hx-vp="mobile"] .ws-button--ghost:hover,
html[data-theme="dark"][data-hx-vp="mobile"] .hx-btn--ghost:hover {
  --btn-bg: var(--hx-surface-subtle);
  --btn-fg: var(--hx-fg);
}
html[data-theme="dark"][data-hx-vp="mobile"] .ws-button--danger,
html[data-theme="dark"][data-hx-vp="mobile"] .hx-btn--danger {
  --btn-bg: var(--hx-danger);
  --btn-fg: var(--hx-on-primary);
}
html[data-theme="dark"][data-hx-vp="mobile"] .ws-button--danger:hover,
html[data-theme="dark"][data-hx-vp="mobile"] .hx-btn--danger:hover {
  --btn-bg: color-mix(in srgb, var(--hx-danger) 85%, var(--hx-fg));
}

/* Icon buttons (subset of button family) */
.hx-iconbtn {
  width: var(--density-control-height);
  height: var(--density-control-height);
  padding: 0;
  border-radius: var(--radius-element);
  background: transparent;
  color: var(--hx-fg);
  border: 0;
}
.hx-iconbtn:hover {
  background: var(--hx-surface-subtle);
}
.hx-iconbtn--sm {
  width: var(--density-control-height-compact);
  height: var(--density-control-height-compact);
}
.hx-iconbtn svg {
  width: var(--spacing-6);
  height: var(--spacing-6);
}

/* Social / other button family members inherit base; specific overrides via tokens if needed */
.hx-button-social {
  /* token-driven via base */
}

/* Ensure no conflicting hard values; all via tokens above */

/* Specialized product button (moved from components/buttons.css) */
.hx-product-btn {
  gap: var(--spacing-3);
  min-height: var(--density-control-height);
  border-radius: var(--radius-element);
  box-shadow: var(--shadow-low);
}
.hx-product-btn__label {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--btn-font-size-md);
}
.hx-product-btn__price {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--btn-font-size-md);
  opacity: 0.92;
}

/* Button sizes — medium (14px) is default */
.hx-app .ws-button--sm,
.ws-button--sm,
.hx-btn--sm {
  font-size: var(--btn-font-size-sm);
  min-height: var(--density-control-height-compact);
  padding-inline: var(--density-control-pad-x-compact);
}
.ws-button--md,
.hx-btn--md {
  font-size: var(--btn-font-size-md);
}
.hx-app .ws-button--lg,
.ws-button--lg,
.hx-btn--lg {
  font-size: var(--btn-font-size-lg);
  min-height: var(--btn-height-lg);
  padding-inline: var(--spacing-5);
}

/* Dark — Secondary charcoal, Tertiary/Ghost hover charcoal (strengthened) */
html[data-theme="dark"] .hx-app .ws-button--secondary,
html[data-theme="dark"] .ws-button--secondary,
html[data-theme="dark"] .hx-btn--secondary {
  --btn-fg: var(--hx-fg);
  color: var(--hx-fg);
}
html[data-theme="dark"] .hx-app .ws-button--tertiary:hover,
html[data-theme="dark"] .ws-button--tertiary:hover,
html[data-theme="dark"] .hx-btn--tertiary:hover,
html[data-theme="dark"] .hx-app .ws-button--ghost:hover,
html[data-theme="dark"] .ws-button--ghost:hover,
html[data-theme="dark"] .hx-btn--ghost:hover {
  --btn-fg: var(--hx-fg);
  color: var(--hx-fg);
}

/* Fallback: apply light-desktop variants when data-hx-vp is absent */
html[data-theme="light"] .ws-button--primary,
html[data-theme="light"] .hx-btn--primary,
.hx-app .ws-button--primary {
  --btn-bg: var(--hx-primary);
  --btn-fg: var(--hx-on-primary);
  background: var(--btn-bg);
  color: var(--btn-fg);
}
html[data-theme="light"] .ws-button--secondary,
.hx-app .ws-button--secondary {
  --btn-bg: var(--hx-surface-subtle);
  --btn-fg: var(--hx-fg);
  background: var(--btn-bg);
  color: var(--btn-fg);
}
html[data-theme="light"] .ws-button--tertiary,
.hx-app .ws-button--tertiary {
  --btn-bg: transparent;
  --btn-fg: var(--hx-primary);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: none;
  border: 0;
}
html[data-theme="light"] .ws-button--ghost,
.hx-app .ws-button--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--hx-fg);
  background: var(--btn-bg);
  color: var(--btn-fg);
}
html[data-theme="light"] .ws-button--danger,
.hx-app .ws-button--danger {
  --btn-bg: var(--hx-danger);
  --btn-fg: var(--hx-on-primary);
  background: var(--btn-bg);
  color: var(--btn-fg);
}

/* Tertiary: no border */
.ws-button--tertiary,
.hx-btn--tertiary {
  border: 0;
  box-shadow: none;
  outline: none;
}

/* Dark: Secondary charcoal; Tertiary & Ghost charcoal on hover */
html[data-theme="dark"] .ws-button--secondary,
html[data-theme="dark"] .hx-btn--secondary {
  --btn-fg: var(--hx-fg);
  color: var(--hx-fg);
}
html[data-theme="dark"] .ws-button--tertiary:hover,
html[data-theme="dark"] .hx-btn--tertiary:hover,
html[data-theme="dark"] .ws-button--ghost:hover,
html[data-theme="dark"] .hx-btn--ghost:hover {
  --btn-fg: var(--hx-fg);
  color: var(--hx-fg);
}

/* Token SSOT — dark role colors (no app override) */
html[data-theme="dark"],
html[data-ds-theme="dark"] {
  --btn-charcoal: var(--hx-fg);
}
html[data-theme="dark"] .hx-app .ws-button--secondary,
html[data-theme="dark"] .ws-button--secondary {
  --btn-fg: var(--hx-fg);
  color: var(--btn-fg);
  background: var(--btn-bg);
}
html[data-theme="dark"] .hx-app .ws-button--tertiary:hover,
html[data-theme="dark"] .ws-button--tertiary:hover,
html[data-theme="dark"] .hx-app .ws-button--ghost:hover,
html[data-theme="dark"] .ws-button--ghost:hover {
  --btn-fg: var(--hx-fg);
  color: var(--btn-fg);
}

/* REMOVED: conflicting Dark variants for core tones — now handled by 4-variant token rules above */
/* ========== VARIANTS (aggregated) ========== */
/* --- button-social --- */
/* ButtonSocial — token-driven
   Wider buttons. Dark hover uses charcoal for text + icons.
*/

html[data-theme="dark"] .hx-button-social,
html[data-theme="dark"] .hx-app .hx-button-social,
[data-theme="dark"] .hx-button-social {
  background: var(--hx-on-primary);
  color: var(--color-charcoal-brand);
  border-color: var(--hx-line);
}
html[data-theme="dark"] .hx-button-social__icon,
html[data-theme="dark"] .hx-button-social__icon svg,
[data-theme="dark"] .hx-button-social__icon,
[data-theme="dark"] .hx-button-social__icon svg {
  color: var(--color-charcoal-brand);
  fill: var(--color-charcoal-brand);
}

.hx-button-social,
.hx-app .hx-button-social {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-2);
  min-height: var(--btn-height-md);
  min-width: var(--hx-social-min-width); /* wider */
  padding-inline: calc(var(--hx-social-icon-offset) + var(--hx-social-icon-size) + var(--spacing-2));
  border: 1px solid var(--hx-line);
  border-radius: var(--radius-full);
  background: var(--hx-surface);
  color: var(--hx-fg);
  font-family: var(--font-family-body);
  font-size: var(--btn-font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.hx-button-social__icon {
  position: absolute;
  left: var(--hx-social-icon-offset);
  top: 50%;
  transform: translateY(-50%);
  width: var(--hx-social-icon-size);
  height: var(--hx-social-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: inherit;
  pointer-events: none;
}

.hx-button-social__icon svg {
  width: var(--hx-social-icon-size);
  height: var(--hx-social-icon-size);
  fill: currentColor;
}

.hx-button-social:hover,
.hx-app .hx-button-social:hover {
  background: var(--hx-fg);
  color: var(--hx-surface);
  border-color: var(--hx-fg);
}

.hx-button-social:hover .hx-button-social__icon,
.hx-button-social:hover .hx-button-social__icon svg {
  color: inherit;
  fill: currentColor;
}

/* Dark theme: hover uses charcoal for both font and icons */
html[data-theme="dark"] .hx-button-social:hover,
html[data-theme="dark"] .hx-app .hx-button-social:hover,
[data-theme="dark"] .hx-button-social:hover {
  background: var(--hx-fg);
  color: var(--color-charcoal-brand);
  border-color: var(--hx-fg);
}

html[data-theme="dark"] .hx-button-social:hover .hx-button-social__icon,
html[data-theme="dark"] .hx-button-social:hover .hx-button-social__icon svg,
[data-theme="dark"] .hx-button-social:hover .hx-button-social__icon,
[data-theme="dark"] .hx-button-social:hover .hx-button-social__icon svg {
  color: var(--color-charcoal-brand);
  fill: var(--color-charcoal-brand);
}

.hx-button-social:disabled,
.hx-button-social.is-disabled,
.hx-button-social[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.hx-button-social--google,
.hx-button-social--apple,
.hx-button-social--facebook,
.hx-button-social--email {}

/* Center CTA content with the icon */
.hx-button-social {
  text-align: center;
}
.hx-button-social > :not(.hx-button-social__icon) {
  flex: 1;
  text-align: center;
}

/* Social button — token-driven */
.hx-button-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-width: 240px;
  min-height: var(--btn-height-md);
  padding: 0 var(--spacing-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--hx-line);
  background: var(--hx-on-primary);
  color: var(--hx-fg);
  font-weight: var(--font-weight-semibold);
  font-size: var(--btn-font-size-md);
}
.hx-button-social__icon { display: inline-flex; width: 20px; height: 20px; }
.hx-button-social__icon svg { width: 20px; height: 20px; display: block; }
.hx-button-social--facebook { background: var(--hx-social-facebook); border-color: var(--hx-social-facebook); color: var(--hx-on-primary); }
/* --- button-toggle --- */
/* ButtonToggle — token-driven
   Overrides ButtonIcon fixed sizes (.hx-iconbtn--md = 40px from button-icon.css)
   Fill only on pressed; sizes to content
*/

/* Base — beat .hx-iconbtn--md */
.hx-iconbtn-toggle.hx-iconbtn--md,
button.hx-iconbtn-toggle.hx-iconbtn--md,
.hx-app .hx-iconbtn-toggle.hx-iconbtn--md,
.hx-app button.hx-iconbtn-toggle.hx-iconbtn--md {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  height: var(--density-control-height);
  min-width: var(--density-control-height);
  max-width: none;
  width: fit-content;
  padding: 0 var(--spacing-2);
  border: 0;
  border-radius: var(--radius-inner);
  background: transparent;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
  font-size: var(--text-label-size);
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

/* Icon-only: tight square */
.hx-iconbtn-toggle.hx-iconbtn--md:not(:has(.hx-toggle__text)):not(.hx-iconbtn-toggle--label),
button.hx-iconbtn-toggle.hx-iconbtn--md:not(:has(.hx-toggle__text)):not(.hx-iconbtn-toggle--label),
.hx-app .hx-iconbtn-toggle.hx-iconbtn--md:not(:has(.hx-toggle__text)):not(.hx-iconbtn-toggle--label) {
  width: var(--density-control-height);
  min-width: var(--density-control-height);
  max-width: var(--density-control-height);
  padding: 0;
}

/* Labeled: content-sized (overrides button-icon 40px) */
.hx-iconbtn-toggle.hx-iconbtn--md.hx-iconbtn-toggle--label,
.hx-iconbtn-toggle.hx-iconbtn--md:has(.hx-toggle__text),
button.hx-iconbtn-toggle.hx-iconbtn--md:has(.hx-toggle__text),
.hx-app .hx-iconbtn-toggle.hx-iconbtn--md.hx-iconbtn-toggle--label,
.hx-app .hx-iconbtn-toggle.hx-iconbtn--md:has(.hx-toggle__text),
.hx-preview-card__stage .hx-iconbtn-toggle.hx-iconbtn--md.hx-iconbtn-toggle--label,
.hx-preview-card__stage .hx-iconbtn-toggle.hx-iconbtn--md:has(.hx-toggle__text) {
  width: fit-content;
  min-width: 0;
  max-width: none;
  padding: 0 var(--density-control-pad-x-compact);
}

.hx-iconbtn-toggle .hx-toggle__text {
  font-size: inherit;
  line-height: 1;
  color: inherit;
}

.hx-iconbtn-toggle__mark {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Fill only when pressed */
.hx-iconbtn-toggle.is-pressed,
.hx-iconbtn-toggle[aria-pressed="true"],
.hx-iconbtn-toggle.hx-iconbtn--md.is-pressed,
.hx-iconbtn-toggle.hx-iconbtn--md[aria-pressed="true"],
.hx-app .hx-iconbtn-toggle.is-pressed,
.hx-app .hx-iconbtn-toggle[aria-pressed="true"] {
  background: var(--hx-neutral-bg);
  color: inherit;
  font-weight: var(--font-weight-semibold);
}

.hx-iconbtn-toggle:hover:not(.is-pressed):not([aria-pressed="true"]) {
  background: var(--hx-neutral-bg);
}

.hx-iconbtn-toggle.is-pressed:hover,
.hx-iconbtn-toggle[aria-pressed="true"]:hover {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}

/* ButtonToggle — Dark */
html[data-theme="dark"] .hx-iconbtn-toggle,
[data-theme="dark"] .hx-iconbtn-toggle {
  color: var(--hx-fg);
}
html[data-theme="dark"] .hx-iconbtn-toggle.is-pressed,
html[data-theme="dark"] .hx-iconbtn-toggle[aria-pressed="true"],
[data-theme="dark"] .hx-iconbtn-toggle.is-pressed {
  background: var(--hx-neutral-bg);
  color: var(--hx-fg);
}
html[data-theme="dark"] .hx-iconbtn-toggle:hover:not(.is-pressed),
[data-theme="dark"] .hx-iconbtn-toggle:hover:not(.is-pressed) {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}

/* Toggle button — token-driven */
.hx-button-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height-md);
  padding: 0 var(--spacing-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--hx-primary);
  background: var(--hx-on-primary);
  color: var(--hx-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--btn-font-size-md);
  cursor: pointer;
}
.hx-button-toggle--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.hx-button-toggle--lg { height: 48px; padding: 0 20px; font-size: 16px; }
.hx-button-toggle.is-selected { background: var(--hx-primary); color: var(--hx-on-primary); }
.hx-button-toggle--red { border-color: var(--hx-danger); color: var(--hx-danger); }
.hx-button-toggle--red.is-selected { background: var(--hx-danger); color: var(--hx-on-primary); border-color: var(--hx-danger); }
.hx-button-toggle:disabled { opacity: 0.45; }

/* ButtonIcon sizes — force square, prevent helix height conflicts */
.hx-iconbtn,
.hx-iconbtn--md,
button.hx-iconbtn,
.hx-app .hx-iconbtn {
  width: var(--density-control-height);
  height: var(--density-control-height);
  min-width: var(--density-control-height);
  min-height: var(--density-control-height);
  max-width: var(--density-control-height);
  padding: 0;
  box-sizing: border-box;
}

.hx-iconbtn--sm,
button.hx-iconbtn--sm,
.hx-app .hx-iconbtn--sm {
  width: var(--density-control-height-compact);
  height: var(--density-control-height-compact);
  min-width: var(--density-control-height-compact);
  min-height: var(--density-control-height-compact);
  max-width: var(--density-control-height-compact);
  padding: 0;
}

/* ButtonToggle — default state visible (same color family as pressed) */
.hx-iconbtn-toggle,
.hx-button-toggle,
button.hx-iconbtn-toggle {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
  border: 1px solid var(--hx-line);
}

.hx-iconbtn-toggle.is-pressed,
.hx-iconbtn-toggle[aria-pressed="true"],
.hx-button-toggle.is-selected {
  background: var(--hx-surface);
  color: var(--hx-fg);
}

/* ButtonIcon — force true square (override any 48px from parent) */
.hx-iconbtn,
.hx-iconbtn--md,
button.hx-iconbtn,
.hx-app .hx-iconbtn,
.hx-app button.hx-iconbtn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
}

.hx-iconbtn--sm,
.hx-app .hx-iconbtn--sm {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
}

/* ButtonIcon sizes — distinct and square */
.hx-iconbtn--sm,
button.hx-iconbtn--sm,
.hx-app .hx-iconbtn--sm,
.hx-app button.hx-iconbtn--sm {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
}

.hx-iconbtn--md,
.hx-iconbtn:not(.hx-iconbtn--sm):not(.hx-iconbtn--lg),
button.hx-iconbtn--md,
.hx-app .hx-iconbtn--md {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
}

.hx-iconbtn--lg,
button.hx-iconbtn--lg,
.hx-app .hx-iconbtn--lg {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
}

/* ButtonToggle light mode — beat helix transparent */
html[data-theme="light"] .hx-iconbtn-toggle,
html[data-ds-theme="light"] .hx-iconbtn-toggle,
.hx-app .hx-iconbtn-toggle,
body.hx-app .hx-iconbtn-toggle {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}

/* ButtonIcon sizes — beat helix-app */
.hx-app .hx-iconbtn--sm,
body.hx-app .hx-iconbtn--sm { width: 32px; height: 32px; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; }
.hx-app .hx-iconbtn--md,
body.hx-app .hx-iconbtn--md,
.hx-app .hx-iconbtn:not(.hx-iconbtn--sm):not(.hx-iconbtn--lg):not(:has(.hx-toggle__text)):not(.hx-iconbtn-toggle--label) { width: 40px; height: 40px; min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; }
.hx-app .hx-iconbtn--lg,
body.hx-app .hx-iconbtn--lg { width: 48px; height: 48px; min-width: 48px; min-height: 48px; max-width: 48px; max-height: 48px; }

/* ButtonToggle — Light default visible */
html[data-theme="light"] .hx-iconbtn-toggle,
html:not([data-theme="dark"]) .hx-iconbtn-toggle,
.hx-preview-card__stage[data-theme="light"] .hx-iconbtn-toggle {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}

/* ButtonToggle with text — expand to fit content (not square) */
.hx-iconbtn-toggle:has(.hx-toggle__text),
.hx-iconbtn-toggle.hx-iconbtn-toggle--label,
.hx-iconbtn-toggle:has(span),
.hx-app .hx-iconbtn-toggle:has(.hx-toggle__text),
.hx-app .hx-iconbtn-toggle.hx-iconbtn-toggle--label {
  width: auto;
  min-width: 40px;
  max-width: none;
  height: 40px;
  padding: 0 12px;
  gap: 6px;
}

/* Beat the transparent rule on .hx-iconbtn-toggle.hx-iconbtn--md */
.hx-iconbtn-toggle.hx-iconbtn--md,
button.hx-iconbtn-toggle.hx-iconbtn--md,
.hx-app .hx-iconbtn-toggle.hx-iconbtn--md,
.hx-app button.hx-iconbtn-toggle.hx-iconbtn--md,
html[data-theme="light"] .hx-iconbtn-toggle.hx-iconbtn--md,
html[data-theme="light"] .hx-app .hx-iconbtn-toggle.hx-iconbtn--md,
.hx-preview-card__stage[data-theme="light"] .hx-iconbtn-toggle.hx-iconbtn--md {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}

/* ButtonToggle — default no fill */
.hx-iconbtn-toggle:not(.is-pressed):not([aria-pressed="true"]),
.hx-button-toggle:not(.is-selected) {
  background: transparent;
}
html[data-theme="light"] .hx-iconbtn-toggle:not(.is-pressed):not([aria-pressed="true"]),
html[data-theme="light"] .hx-iconbtn-toggle.hx-iconbtn--md:not(.is-pressed) {
  background: transparent;
}

/* REMOVED conflicting ghost rules — 4-variant token rules are SSOT */


/* ButtonIcon text charcoal in Dark (and generally) */
/* ButtonIcon — Dark enabled (token-driven) */
html[data-theme="dark"] .hx-iconbtn,
html[data-theme="dark"] .hx-iconbtn--sm,
html[data-theme="dark"] .hx-iconbtn--md,
html[data-theme="dark"] .hx-iconbtn--lg,
html[data-theme="dark"] .hx-app .hx-iconbtn {
  background: transparent;
  color: var(--hx-on-primary);
  border: 0;
}
html[data-theme="dark"] .hx-iconbtn--secondary,
html[data-theme="dark"] .hx-app .hx-iconbtn--secondary {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}
html[data-theme="dark"] .hx-iconbtn--primary,
html[data-theme="dark"] .hx-app .hx-iconbtn--primary {
  background: var(--hx-primary);
  color: var(--hx-on-primary);
}
html[data-theme="dark"] .hx-iconbtn--ghost,
html[data-theme="dark"] .hx-app .hx-iconbtn--ghost {
  background: transparent;
  color: var(--hx-on-primary);
}

/* Icon size 20px */
.hx-iconbtn svg,
.hx-iconbtn .hx-icon,
.hx-iconbtn__icon {
  width: 20px;
  height: 20px;
}

/* ButtonToggle — same color for default-active and click-pressed */
.hx-iconbtn-toggle.is-pressed,
.hx-iconbtn-toggle[aria-pressed="true"],
.hx-button-toggle.is-selected,
.hx-iconbtn-toggle.is-pressed:hover,
.hx-iconbtn-toggle[aria-pressed="true"]:hover {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}

/* REMOVED conflicting ghost rules — 4-variant token rules are SSOT */


/* REMOVED conflicting ghost rules — 4-variant token rules are SSOT */


/* ButtonToggle pressed — single color */
.hx-iconbtn-toggle.is-pressed,
.hx-iconbtn-toggle[aria-pressed="true"],
.hx-iconbtn-toggle.hx-iconbtn--md.is-pressed,
.hx-app .hx-iconbtn-toggle.is-pressed,
.hx-iconbtn-toggle.is-pressed:hover,
.hx-iconbtn-toggle[aria-pressed="true"]:hover {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}

/* Ghost Dark hover — SSOT via brand tokens (beats any residual helix) */
html[data-theme="dark"] .hx-app .hx-btn--ghost:hover,
html[data-theme="dark"] .hx-app .ws-button--ghost:hover,
html[data-theme="dark"] body.hx-app .hx-btn--ghost:hover,
html[data-theme="dark"] .ws-button--ghost:hover,
html[data-theme="dark"] .hx-btn--ghost:hover {
  --btn-bg: var(--hx-surface-subtle);
  --btn-fg: var(--hx-fg);
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}
/* ButtonIcon ghost hover in dark follows the same contract */
html[data-theme="dark"] .hx-iconbtn--ghost:hover,
html[data-theme="dark"] .hx-app .hx-iconbtn--ghost:hover {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}

/* ButtonToggle pressed — force single color, Light + Dark */
.hx-iconbtn-toggle.is-pressed,
.hx-iconbtn-toggle[aria-pressed="true"],
.hx-iconbtn-toggle.hx-iconbtn--md.is-pressed,
.hx-app .hx-iconbtn-toggle.is-pressed,
.hx-app .hx-iconbtn-toggle[aria-pressed="true"],
body.hx-app .hx-iconbtn-toggle.is-pressed,
html[data-theme="light"] .hx-iconbtn-toggle.is-pressed,
html[data-theme="light"] .hx-iconbtn-toggle.hx-iconbtn--md.is-pressed {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}

html[data-theme="dark"] .hx-iconbtn-toggle.is-pressed,
html[data-theme="dark"] .hx-iconbtn-toggle[aria-pressed="true"],
html[data-theme="dark"] .hx-app .hx-iconbtn-toggle.is-pressed,
html[data-theme="dark"] body.hx-app .hx-iconbtn-toggle.is-pressed {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}

html[data-theme="dark"] .hx-iconbtn-toggle:not(.is-pressed):not([aria-pressed="true"]) {
  background: transparent;
  color: var(--hx-fg);
}

/* ButtonToggle — same color for onload-pressed and click-pressed */
.hx-iconbtn-toggle.is-pressed,
.hx-iconbtn-toggle[aria-pressed="true"],
.hx-iconbtn-toggle.is-pressed:hover,
.hx-iconbtn-toggle[aria-pressed="true"]:hover,
html[data-theme="light"] .hx-iconbtn-toggle.is-pressed,
html[data-theme="dark"] .hx-iconbtn-toggle.is-pressed,
.hx-app .hx-iconbtn-toggle.is-pressed,
body.hx-app .hx-iconbtn-toggle.is-pressed {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}

/* REMOVED: hard-coded Restore previous Dark colors — replaced by --color-sand-brand / --color-charcoal-brand in 4-variant rules */

/* ButtonIcon — With Tooltips: Dark hover icon = charcoal-brand (beats tooltip svg color) */
html[data-theme="dark"] .hx-iconbtn:hover,
html[data-theme="dark"] .hx-iconbtn--ghost:hover,
html[data-theme="dark"] .hx-app .hx-iconbtn:hover,
html[data-theme="dark"] .hx-app .hx-iconbtn--ghost:hover,
html[data-theme="dark"] .hx-tooltip:hover .hx-iconbtn,
html[data-theme="dark"] .hx-tooltip:hover .hx-iconbtn--ghost,
html[data-theme="dark"] .hx-tooltip:hover .hx-iconbtn svg,
html[data-theme="dark"] .hx-tooltip:hover .hx-iconbtn__glyph,
html[data-theme="dark"] .hx-app .hx-tooltip:hover .hx-iconbtn,
html[data-theme="dark"] .hx-app .hx-tooltip:hover .hx-iconbtn svg {
  color: var(--hx-fg);
  fill: none;
}

/* ButtonIcon Dark hover — higher specificity, hits svg stroke/currentColor */
html[data-theme="dark"] .hx-tooltip:hover .hx-iconbtn,
html[data-theme="dark"] .hx-tooltip:hover .hx-iconbtn.hx-iconbtn--ghost,
html[data-theme="dark"] .hx-app .hx-tooltip:hover .hx-iconbtn,
html[data-theme="dark"] .hx-app .hx-tooltip:hover .hx-iconbtn.hx-iconbtn--ghost,
html[data-theme="dark"] .hx-tooltip:hover .hx-iconbtn svg,
html[data-theme="dark"] .hx-tooltip:hover .hx-iconbtn svg *,
html[data-theme="dark"] .hx-app .hx-tooltip:hover .hx-iconbtn svg,
html[data-theme="dark"] .hx-app .hx-tooltip:hover .hx-iconbtn svg * {
  color: var(--hx-fg);
  stroke: var(--hx-fg);
  fill: none;
}

/* ButtonIcon Dark hover — final SSOT (button + glyph + svg stroke) */
html[data-theme="dark"] .hx-tooltip:hover button.hx-iconbtn,
html[data-theme="dark"] .hx-tooltip:hover button.hx-iconbtn.hx-iconbtn--ghost,
html[data-theme="dark"] .hx-app .hx-tooltip:hover button.hx-iconbtn,
html[data-theme="dark"] body.hx-app .hx-tooltip:hover button.hx-iconbtn,
html[data-theme="dark"] .hx-tooltip:hover .hx-iconbtn__glyph,
html[data-theme="dark"] .hx-tooltip:hover .hx-iconbtn svg,
html[data-theme="dark"] .hx-tooltip:hover .hx-iconbtn svg path,
html[data-theme="dark"] .hx-app .hx-tooltip:hover .hx-iconbtn svg,
html[data-theme="dark"] .hx-app .hx-tooltip:hover .hx-iconbtn svg path {
  color: var(--hx-fg);
  stroke: var(--hx-fg);
  fill: none;
}


/* Icon button: fill only on hover (wins helix-app) */
.hx-app .hx-iconbtn,
.hx-iconbtn {
  background: transparent;
}
.hx-app .hx-iconbtn:hover,
.hx-iconbtn:hover {
  background: var(--hx-surface-subtle);
}


/* Floating icon button: keep contrast on hover */
.hx-iconbtn--floating,
.hx-app .hx-iconbtn--floating {
  background: var(--hx-surface);
  color: var(--hx-fg);
  box-shadow: var(--hx-elev);
}
.hx-iconbtn--floating:hover,
.hx-app .hx-iconbtn--floating:hover {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}