/*
 * Shared UI components — ported from app/src/components/ui/*.module.css.
 * Class names are prefixed slg- since this is global CSS, not CSS Modules.
 */

/* Button — app/src/components/ui/Button.module.css */
.slg-btn {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: 500;
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
  white-space: nowrap;
  text-decoration: none;
}
.slg-btn:disabled,
.slg-btn.disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.slg-btn--sm { padding: 8px 14px; font-size: 11px; }
.slg-btn--md { padding: 12px 20px; font-size: 12px; }
.slg-btn--lg { padding: 16px 28px; font-size: 13px; }

.slg-btn--primary {
  background: var(--accent-primary);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-tag);
}
.slg-btn--secondary {
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-tag);
}
.slg-btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: transparent;
  box-shadow: none;
}

.slg-btn--primary:not(:disabled):hover,
.slg-btn--secondary:not(:disabled):hover {
  box-shadow: var(--shadow-tag-hover);
  transform: translate(-1px, -1px);
}
.slg-btn--primary:not(:disabled):active,
.slg-btn--secondary:not(:disabled):active {
  box-shadow: var(--shadow-tag-press);
  transform: translate(2px, 2px);
}

/* Badge — app/src/components/ui/Badge.module.css */
.slg-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-block;
}
.slg-badge--sale {
  background: var(--signal-sale-bg);
  color: var(--signal-sale);
  border: 1px solid var(--signal-sale);
}
.slg-badge--success {
  background: var(--signal-success-bg);
  color: var(--signal-success);
  border: 1px solid var(--signal-success);
}
.slg-badge--error {
  background: var(--signal-error-bg);
  color: var(--signal-error);
  border: 1px solid var(--signal-error);
}
.slg-badge--new {
  background: var(--cobalt-100);
  color: var(--cobalt-700);
  border: 1px solid var(--accent-primary);
}

/*
 * PriceTag — ported from app/src/components/ui/PriceTag.module.css, but
 * wraps WooCommerce's own get_price_html() output instead of reimplementing
 * regular/sale-price logic, so variable-product price ranges stay correct.
 */
.slg-price {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-mono);
}
.slg-price .price {
  font-size: 20px;
  color: var(--text-primary);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.slg-price--lg .price {
  font-size: 28px;
}
/*
 * PDP-only bump — the shared .slg-price--lg size (28px) is also used
 * nowhere else today, but the token stays shared in case that changes;
 * this scopes the stronger weight/size to the PDP price specifically so
 * cards/hero (if they ever adopt --lg) keep the original React-approved
 * scale.
 */
.slg-pdp .slg-price--lg .price {
  font-size: 34px;
  font-weight: 700;
}
.slg-price .price ins {
  text-decoration: none;
  color: var(--signal-sale);
}
.slg-price .price del {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: 1;
}

/* Tag (filter chip) — app/src/components/ui/Tag.module.css */
.slg-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: lowercase;
  background: var(--surface-card);
  border: var(--border-w-hairline) solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
.slg-tag:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}
.slg-tag.is-active {
  background: var(--ink-950);
  border-color: var(--ink-950);
  color: var(--bone);
}
.slg-tag.is-active:hover {
  background: var(--ink-800);
}

/* Size swatches — app/src/components/commerce/SizeSelect.module.css.
   Progressively enhances the native WooCommerce variation <select>. */
.slg-size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.slg-size-option {
  min-width: 48px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
.slg-size-option:hover {
  background: var(--surface-sunken);
}
.slg-size-option.is-selected {
  background: var(--ink-950);
  color: var(--bone);
  border-color: var(--ink-950);
}
.slg-size-option:disabled,
.slg-size-option.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* IconButton — app/src/components/ui/IconButton.module.css */
.slg-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-primary);
  border: var(--border-w-hairline) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap);
}
.slg-icon-btn:hover {
  border-color: var(--border-subtle);
}
.slg-icon-btn.is-active {
  background: var(--ink-950);
  color: var(--bone);
}
.slg-icon-btn__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--accent-secondary);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}