/* v3.7.242: Design system Phase 2 — 3 variants + modifiers.
   Replaces the v3.7.241 5-variant system. --tertiary and --ghost
   collapsed into --subtle. */

:root {
  --btn-pad-sm: 4px 10px;
  --btn-pad-md: 8px 16px;
  --btn-pad-lg: 14px 22px;
  --btn-font-sm: 11px;
  --btn-font-md: 12px;
  --btn-font-lg: 14px;
  --btn-min-h-sm: 28px;
  --btn-min-h-md: 36px;
  --btn-min-h-lg: 44px;
  --btn-radius: 3px;
  --btn-border-w: 1.5px;
  --btn-transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
  --btn-focus-ring: 2px solid var(--blue, #3F4C6B);
  --btn-focus-offset: 2px;
}

/* ---------- Base ---------- */
.wtpp-btn,
a.wtpp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--btn-pad-md);
  font-family: var(--mono, "Inconsolata", "Courier New", monospace);
  font-size: var(--btn-font-md);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  min-height: var(--btn-min-h-md);
  border: var(--btn-border-w) solid transparent;
  border-radius: var(--btn-radius);
  text-decoration: none;
  cursor: pointer;
  transition: var(--btn-transition);
  white-space: nowrap;
  user-select: none;
  box-sizing: border-box;
}
.wtpp-btn:focus-visible,
a.wtpp-btn:focus-visible {
  outline: var(--btn-focus-ring);
  outline-offset: var(--btn-focus-offset);
}
.wtpp-btn:active:not(:disabled):not([aria-disabled="true"]),
a.wtpp-btn:active {
  transform: scale(0.97);
}
.wtpp-btn:disabled,
.wtpp-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ---------- Sizes ---------- */
.wtpp-btn--sm, a.wtpp-btn--sm {
  padding: var(--btn-pad-sm);
  font-size: var(--btn-font-sm);
  min-height: var(--btn-min-h-sm);
}
.wtpp-btn--lg, a.wtpp-btn--lg {
  padding: var(--btn-pad-lg);
  font-size: var(--btn-font-lg);
  min-height: var(--btn-min-h-lg);
}

/* ---------- Variant 1: PRIMARY ---------- */
.wtpp-btn--primary,
a.wtpp-btn--primary,
a.wtpp-btn--primary:link,
a.wtpp-btn--primary:visited {
  background: var(--red, var(--red-bg));
  color: var(--pure-white);
  border-color: var(--red, var(--red-bg));
}
.wtpp-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
.wtpp-btn--primary:focus-visible:not(:disabled),
a.wtpp-btn--primary:hover,
a.wtpp-btn--primary:focus-visible {
  background: var(--ink, var(--ink-11));
  border-color: var(--ink, var(--ink-11));
  color: var(--pure-white);
}
html[data-theme="dark"] a.wtpp-btn--primary,
html[data-theme="dark"] a.wtpp-btn--primary:link,
html[data-theme="dark"] a.wtpp-btn--primary:visited,
html[data-theme="dark"] a.wtpp-btn--primary:hover,
html[data-theme="dark"] a.wtpp-btn--primary:focus-visible {
  color: var(--pure-white) !important;
}

/* v3.7.265: dark-mode --primary hover background fix. Without this,
   hover bg falls back to var(--ink) which is light/cream in dark
   mode, producing illegible white-on-cream. Override to a deeper red
   (the platform's light-mode --red) for clear tonal shift against
   the dark-mode dusty-pink resting state, while keeping high
   contrast with white text. */
html[data-theme="dark"] .wtpp-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
html[data-theme="dark"] .wtpp-btn--primary:focus-visible:not(:disabled),
html[data-theme="dark"] a.wtpp-btn--primary:hover,
html[data-theme="dark"] a.wtpp-btn--primary:focus-visible {
  background: var(--red-bg);
  border-color: var(--red-bg);
}

/* ---------- Variant 2: SECONDARY ---------- */
.wtpp-btn--secondary,
a.wtpp-btn--secondary,
a.wtpp-btn--secondary:link,
a.wtpp-btn--secondary:visited {
  background: transparent;
  color: var(--blue, var(--navy-30));
  border-color: var(--blue, var(--navy-30));
}
.wtpp-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.wtpp-btn--secondary:focus-visible:not(:disabled),
a.wtpp-btn--secondary:hover,
a.wtpp-btn--secondary:focus-visible {
  background: var(--blue, var(--navy-30));
  color: var(--pure-white);
}
html[data-theme="dark"] .wtpp-btn--secondary,
html[data-theme="dark"] a.wtpp-btn--secondary,
html[data-theme="dark"] a.wtpp-btn--secondary:link,
html[data-theme="dark"] a.wtpp-btn--secondary:visited {
  color: var(--blue, var(--navy-66)) !important;
  border-color: var(--blue, var(--navy-66)) !important;
}
html[data-theme="dark"] .wtpp-btn--secondary:hover:not(:disabled),
html[data-theme="dark"] a.wtpp-btn--secondary:hover,
html[data-theme="dark"] a.wtpp-btn--secondary:focus-visible {
  background: var(--blue, var(--navy-66)) !important;
  color: var(--paper, var(--ink-11x)) !important;
}

/* ---------- Variant 3: SUBTLE
   Replaces v3.7.241's --tertiary and --ghost. Used for navigation,
   filter pills, set selection (theme picker, language picker), and
   icon-only controls (via --icon modifier). */
.wtpp-btn--subtle,
a.wtpp-btn--subtle,
a.wtpp-btn--subtle:link,
a.wtpp-btn--subtle:visited {
  background: transparent;
  color: var(--ink-soft, var(--ink-29));
  border-color: var(--rule, var(--paper-84));
}
.wtpp-btn--subtle:hover:not(:disabled):not([aria-disabled="true"]),
.wtpp-btn--subtle:focus-visible:not(:disabled),
a.wtpp-btn--subtle:hover,
a.wtpp-btn--subtle:focus-visible {
  background: var(--surface-hover, var(--ov-black-06));
  color: var(--ink, var(--ink-11));
  border-color: var(--ink-muted, var(--tone-45));
}
html[data-theme="dark"] .wtpp-btn--subtle:hover:not(:disabled),
html[data-theme="dark"] a.wtpp-btn--subtle:hover,
html[data-theme="dark"] a.wtpp-btn--subtle:focus-visible {
  background: var(--ov-white-10);
  color: var(--ink, var(--paper-89x));
  border-color: var(--ink-muted, var(--tone-51));
}
.wtpp-btn--subtle[aria-pressed="true"],
.wtpp-btn--subtle[aria-expanded="true"],
.wtpp-btn--subtle.is-active {
  background: var(--red-bg, var(--red-bg));
  color: var(--pure-white);
  border-color: var(--red-bg, var(--red-bg));
}
/* v3.7.396: dark-mode active state locked to a fixed dark red (var(--red-bg))
   instead of var(--red) — the v3.7.395 token shift moved --red from #C26873
   to #D77C87 to fix text-on-bg uses, but white-text-on-red-bg (which the
   active filter-pill is) needs a darker red to pass AA. Same pattern as
   the SVG hero circles in v3.7.395: a token can't simultaneously satisfy
   text-on-bg AND text-on-red-bg requirements. var(--red-bg) passes white text
   at 8.20 ratio (AA comfortable) in both themes. */
/* v3.7.397: dark-mode override no longer needed — the new
   var(--red-bg) token is theme-stable (same value in light and
   dark), so the base rule above applies in both. Removing the
   override removes a maintenance footgun. */
html[data-theme="dark"] a.wtpp-btn--subtle,
html[data-theme="dark"] a.wtpp-btn--subtle:link,
html[data-theme="dark"] a.wtpp-btn--subtle:visited {
  color: var(--ink-soft, var(--tone-68)) !important;
}

/* ---------- Modifier: icon-only ---------- */
.wtpp-btn--icon {
  width: var(--btn-min-h-md);
  height: var(--btn-min-h-md);
  padding: 0;
  gap: 0;
}
.wtpp-btn--icon.wtpp-btn--sm {
  width: var(--btn-min-h-sm);
  height: var(--btn-min-h-sm);
  padding: 0;
}
.wtpp-btn--icon.wtpp-btn--lg {
  width: var(--btn-min-h-lg);
  height: var(--btn-min-h-lg);
  padding: 0;
}
.wtpp-btn--icon svg {
  width: 60%;
  height: 60%;
}

/* v3.7.251: drop the cream border on icon-only --subtle buttons.
   v3.7.250 added border-color: var(--rule) to all --subtle buttons to
   make text-bearing controls discoverable. For icon-only buttons (header
   strip, TTS prev/next/close, etc.) the square geometry + hover bg tint
   already give enough affordance; the cream outline added visual noise
   around small icon shapes. Specificity 0,2,0 beats the --subtle base
   (0,1,0) and --subtle:hover (0,1,1). */
.wtpp-btn--subtle.wtpp-btn--icon,
a.wtpp-btn--subtle.wtpp-btn--icon,
.wtpp-btn--subtle.wtpp-btn--icon:hover:not(:disabled):not([aria-disabled="true"]),
.wtpp-btn--subtle.wtpp-btn--icon:focus-visible:not(:disabled),
a.wtpp-btn--subtle.wtpp-btn--icon:hover,
a.wtpp-btn--subtle.wtpp-btn--icon:focus-visible {
  border-color: transparent;
}

/* ---------- Modifier: block (full-width) ---------- */
.wtpp-btn--block {
  display: flex;
  width: 100%;
}