/* Phase 1: opt-in customer buttons. Uses existing theme colors exclusively.
   Enable on a reviewed container with .ep-buttons-v1; remove it to roll back.
   The customer app opts in through body.ep-app; the loader excludes admin.
   Public/legacy buttons use the separate color-preserving bridge. */
:is(.ep-buttons-v1, body.ep-app) .ep-button {
  box-sizing: border-box; position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; min-width: 44px; padding: .625rem 1.125rem;
  border: 1px solid var(--ep-border-2); border-radius: 8px;
  font: inherit; font-size: .875rem; font-weight: 700; line-height: 1.5;
  text-decoration: none; white-space: nowrap; vertical-align: middle;
  color: var(--ep-ink); background: var(--ep-surface-2); background-image: none;
  box-shadow: inset 0 1px 0 var(--ep-border-2), 0 2px 3px var(--ep-inset);
  cursor: pointer; transform: none; filter: none; -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 180ms ease, transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
:is(.ep-buttons-v1, body.ep-app) .ep-button.primary {
  background: var(--ep-accent); color: var(--ep-on-accent); border-color: transparent;
  box-shadow: inset 0 1px 0 var(--ep-border-2), 0 2px 3px var(--ep-inset);
}
:is(.ep-buttons-v1, body.ep-app) .ep-button.outline {
  background: transparent; color: var(--ep-ink-2); border-color: var(--ep-border-2); box-shadow: none;
}
:is(.ep-buttons-v1, body.ep-app) .ep-button.ghost {
  background: transparent; color: var(--ep-ink-3); border-color: transparent; box-shadow: none;
}
:is(.ep-buttons-v1, body.ep-app) .ep-button.danger {
  color: var(--ep-bad); background: color-mix(in srgb, var(--ep-bad) 9%, transparent);
  border-color: color-mix(in srgb, var(--ep-bad) 26%, transparent); box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  :is(.ep-buttons-v1, body.ep-app) .ep-button:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    border-color: var(--ep-ink-4); filter: none;
    box-shadow: inset 0 1px 0 var(--ep-border-2), 0 6px 12px var(--ep-inset);
  }
  :is(.ep-buttons-v1, body.ep-app) .ep-button.primary:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    border-color: var(--ep-accent-2); background: var(--ep-accent);
  }
  :is(.ep-buttons-v1, body.ep-app) .ep-button:is(.outline,.ghost):hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    background: var(--ep-surface-2); color: var(--ep-ink); box-shadow: none;
  }
}
:is(.ep-buttons-v1, body.ep-app) .ep-button:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
  transform: none; box-shadow: inset 0 1px 2px var(--ep-inset);
}
:is(.ep-buttons-v1, body.ep-app) .ep-button:focus-visible {
  outline: 2px solid var(--ep-accent-2); outline-offset: 3px;
}
:is(.ep-buttons-v1, body.ep-app) .ep-button:is(:disabled,[aria-disabled="true"]) {
  opacity: .45; cursor: not-allowed; transform: none; filter: none; box-shadow: none;
}
:is(.ep-buttons-v1, body.ep-app) .ep-button[aria-busy="true"] {
  opacity: 1; cursor: progress; transform: none; filter: none;
}
:is(.ep-buttons-v1, body.ep-app) .ep-button[aria-busy="true"] > * { visibility: hidden; }
:is(.ep-buttons-v1, body.ep-app) .ep-button[aria-busy="true"]::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  inset: 0; margin: auto; border: 2px solid currentColor; border-inline-end-color: transparent;
  border-radius: 50%; animation: ep-button-progress 750ms linear infinite;
}
:is(.ep-buttons-v1, body.ep-app) .ep-button.sm { min-height: 44px; padding: .5rem .875rem; font-size: .8125rem; border-radius: 8px; }
:is(.ep-buttons-v1, body.ep-app) .ep-button.lg { min-height: 48px; padding: .75rem 1.5rem; font-size: .9375rem; }
:is(.ep-buttons-v1, body.ep-app) .ep-button.block { width: 100%; }
:is(.ep-buttons-v1, body.ep-app) .ep-button.icon { padding: .625rem; }
:is(.ep-buttons-v1, body.ep-app) .ep-button.hidden { display: none; }
:is(.ep-buttons-v1, body.ep-app) .ep-button svg { width: 18px; height: 18px; flex: none; }
@keyframes ep-button-progress { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  :is(.ep-buttons-v1, body.ep-app) .ep-button { transition: none; }
  :is(.ep-buttons-v1, body.ep-app) .ep-button:active:not(:disabled) { transform: none; }
  :is(.ep-buttons-v1, body.ep-app) .ep-button[aria-busy="true"]::after { animation: none; }
}

/* Brief, interruptible pointer feedback; existing palette stays untouched.
   No lift on touchscreens, no motion for keyboard focus or reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    :is(.ep-buttons-v1, body.ep-app) .ep-button:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(:focus-visible) { transform: translateY(-2px); }
  }
  :is(.ep-buttons-v1, body.ep-app) .ep-button:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(:focus-visible) { transform: translateY(0) scale(.985); transition-duration: 100ms; }
}

/* Subtle vertical finish over the existing primary/plan color or gradient.
   Isolated negative layer sits above the button background, below its text;
   it never captures clicks or replaces the existing busy ::after spinner. */
:is(.ep-buttons-v1, body.ep-app) .ep-button.primary { position: relative; isolation: isolate; }
:is(.ep-buttons-v1, body.ep-app) .ep-button.primary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"])::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.035) 100%);
  opacity: .7; transition: opacity 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  :is(.ep-buttons-v1, body.ep-app) .ep-button.primary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.ep-buttons-v1, body.ep-app) .ep-button.primary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"])::before { transition: none; }
}

/* Owner-selected option 2: no hue gradient or top sheen on primary actions. */
html :is(.ep-buttons-v1,body.ep-app) .ep-button.primary:not(.ep-button-custom),
html :is(.ep-buttons-v1,body.ep-app) .ep-button.primary:not(.ep-button-custom):is(:hover,:active,:focus) {
    background-color: #10b981; background-image: none; color: #052e21;
}
html :is(.ep-buttons-v1,body.ep-app) .ep-button.primary:not(.ep-button-custom)::before { content: none !important; }