/**
 * Shared action buttons — one visual system for every app.
 * Primary: mint→white gradient, mint border.
 * Secondary: outline with invert fill on hover.
 * Tertiary: ghost outline (white on dark heroes).
 * Hover: inset box-shadow fill from bottom + subtle raise.
 */

:root {
  --btn-font: 700 0.78rem/1 var(--font-sans, "Manrope", "Segoe UI", Arial, sans-serif);
  --btn-pad: 10px 16px;
  --btn-pad-sm: 6px 10px;
  --btn-hover-ease: cubic-bezier(0.77, 0, 0.175, 1);
  --btn-hover-duration: 400ms;
  --btn-inset-size: 10em;
  --btn-border: #000000;
  --btn-text: #000000;
}

:root[data-theme="dark"],
html[data-theme="dark"] {
  --btn-border: #ffffff;
}

.btn,
.primary,
.secondary,
.pv-btn,
.pv-tile__register,
.account-trigger.nav-accent,
nav a.nav-accent,
.auth-warn-cancel {
  --btn-inset-color: transparent;
  --btn-hover-glow: transparent;
  --btn-hover-text: var(--text, #000);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: var(--btn-pad);
  border-radius: 0;
  border: 1px solid var(--btn-border);
  appearance: none;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font: var(--btn-font);
  cursor: pointer;
  user-select: none;
  color: var(--text, #000);
  background: transparent;
  outline: none;
  box-shadow:
    inset 0 calc(-1 * var(--btn-inset-size)) 0 0 transparent,
    0 0 0 0 var(--btn-hover-glow);
  transform: translateY(0);
  transition:
    box-shadow var(--btn-hover-duration) var(--btn-hover-ease),
    color var(--btn-hover-duration) var(--btn-hover-ease),
    transform var(--btn-hover-duration) var(--btn-hover-ease),
    border-color var(--btn-hover-duration) var(--btn-hover-ease);
}

.btn:hover,
.btn:focus-visible,
.primary:hover,
.primary:focus-visible,
.secondary:hover,
.secondary:focus-visible,
.pv-btn:hover,
.pv-btn:focus-visible,
.pv-tile__register:hover,
.pv-tile__register:focus-visible,
.account-trigger.nav-accent:hover,
.account-trigger.nav-accent:focus-visible,
nav a.nav-accent:hover,
nav a.nav-accent:focus-visible,
.auth-warn-cancel:hover,
.auth-warn-cancel:focus-visible {
  text-decoration: none;
  color: var(--btn-hover-text);
  box-shadow:
    inset 0 0 0 var(--btn-inset-size) var(--btn-inset-color),
    0 0.5em 0.5em -0.4em var(--btn-hover-glow);
  transform: translateY(-0.25em);
}

.btn-sm {
  padding: var(--btn-pad-sm);
  font-size: 0.72rem;
}

/* —— Primary (main) —— */
.primary,
.btn.primary,
.btn.register,
button.primary,
a.primary,
a.btn.primary,
a.btn.register,
.pv-btn--primary,
a.pv-btn.pv-btn--primary,
.pv-tile__register,
a.pv-tile__register,
button.pv-tile__register,
.account-trigger.nav-accent,
nav a.nav-accent {
  --btn-inset-color: var(--mint, #1bd3cb);
  --btn-hover-glow: color-mix(in srgb, var(--mint, #1bd3cb) 40%, transparent);
  --btn-hover-text: var(--btn-text, #000);
  color: var(--btn-text, #000);
  background: var(--btn-gradient, linear-gradient(90deg, #1bd3cb, #ffffff));
  border-color: var(--btn-border);
}

.primary:hover,
.primary:focus-visible,
.btn.primary:hover,
.btn.primary:focus-visible,
.btn.register:hover,
.btn.register:focus-visible,
button.primary:hover,
button.primary:focus-visible,
a.primary:hover,
a.primary:focus-visible,
a.btn.primary:hover,
a.btn.primary:focus-visible,
.pv-btn--primary:hover,
.pv-btn--primary:focus-visible,
.pv-tile__register:hover,
.pv-tile__register:focus-visible,
.account-trigger.nav-accent:hover,
.account-trigger.nav-accent:focus-visible,
nav a.nav-accent:hover,
nav a.nav-accent:focus-visible {
  color: var(--btn-text, #000);
  border-color: var(--btn-border);
}

/* —— Secondary —— */
.secondary,
.btn.secondary,
button.secondary,
a.btn.secondary,
.auth-warn-cancel {
  --btn-inset-color: var(--text, #000);
  --btn-hover-glow: color-mix(in srgb, var(--text, #000) 25%, transparent);
  --btn-hover-text: #ffffff;
  color: var(--text, #000);
  background: transparent;
  border-color: var(--btn-border);
}

:root[data-theme="dark"] .secondary,
:root[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .btn.secondary,
:root[data-theme="dark"] .tertiary,
:root[data-theme="dark"] .btn.tertiary,
:root[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .tertiary,
html[data-theme="dark"] .btn.tertiary,
html[data-theme="dark"] .btn.ghost,
:root[data-theme="dark"] .auth-warn-cancel,
html[data-theme="dark"] .auth-warn-cancel {
  --btn-hover-text: #000000;
}

.secondary:hover,
.secondary:focus-visible,
.btn.secondary:hover,
.btn.secondary:focus-visible,
button.secondary:hover,
button.secondary:focus-visible,
a.btn.secondary:hover,
a.btn.secondary:focus-visible,
a.secondary:hover,
a.secondary:focus-visible,
.auth-warn-cancel:hover,
.auth-warn-cancel:focus-visible {
  color: var(--btn-hover-text);
  border-color: var(--btn-border);
}

/* —— Tertiary (ghost) —— */
.tertiary,
.btn.tertiary,
.btn.ghost,
.pv-btn--ghost {
  --btn-inset-color: var(--text, #000);
  --btn-hover-glow: color-mix(in srgb, var(--text, #000) 25%, transparent);
  --btn-hover-text: #ffffff;
  color: var(--text, #000);
  background: transparent;
  border-color: var(--btn-border);
}

.pv-hero .pv-btn--ghost,
.pv-hero .tertiary,
.pv-hero .btn.tertiary,
.pv-hero .btn.ghost {
  --btn-inset-color: #fff;
  --btn-hover-glow: color-mix(in srgb, #fff 35%, transparent);
  --btn-hover-text: var(--bg, #000);
  color: #fff;
  border-color: var(--btn-border);
}

.tertiary:hover,
.tertiary:focus-visible,
.btn.tertiary:hover,
.btn.tertiary:focus-visible,
.btn.ghost:hover,
.btn.ghost:focus-visible,
.pv-btn--ghost:hover,
.pv-btn--ghost:focus-visible,
a.btn.tertiary:hover,
a.btn.tertiary:focus-visible,
a.btn.ghost:hover,
a.btn.ghost:focus-visible,
a.tertiary:hover,
a.tertiary:focus-visible {
  color: var(--btn-hover-text);
  border-color: var(--btn-border);
}

/* Anchor action buttons: rest color only (hover uses variant rules above). */
a.btn:not(:hover):not(:focus-visible),
a.btn.primary:not(:hover):not(:focus-visible),
a.primary:not(:hover):not(:focus-visible),
a.pv-btn:not(:hover):not(:focus-visible),
a.pv-tile__register:not(:hover):not(:focus-visible),
nav a.nav-accent:not(:hover):not(:focus-visible) {
  color: var(--btn-text, #000);
}

a.btn.secondary:not(:hover):not(:focus-visible),
a.secondary:not(:hover):not(:focus-visible),
a.btn.tertiary:not(:hover):not(:focus-visible),
a.tertiary:not(:hover):not(:focus-visible),
a.btn.ghost:not(:hover):not(:focus-visible) {
  color: var(--text, #000);
}

.pv-hero a.pv-btn--ghost:not(:hover):not(:focus-visible),
.pv-hero a.btn.tertiary:not(:hover):not(:focus-visible),
.pv-hero a.btn.ghost:not(:hover):not(:focus-visible) {
  color: #fff;
}

/* Disabled / static */
.btn:disabled,
.primary:disabled,
.secondary:disabled,
.tertiary:disabled,
.btn.registered {
  cursor: not-allowed;
  opacity: 0.55;
}

.btn.registered {
  cursor: default;
  opacity: 1;
  color: var(--text, #000);
  background: color-mix(in srgb, var(--mint, #1bd3cb) 12%, transparent);
  border-color: color-mix(in srgb, var(--mint, #1bd3cb) 35%, var(--btn-border));
}

.btn:disabled:hover,
.primary:disabled:hover,
.secondary:disabled:hover,
.tertiary:disabled:hover,
.btn.registered:hover,
.btn:disabled:focus-visible,
.primary:disabled:focus-visible,
.secondary:disabled:focus-visible,
.tertiary:disabled:focus-visible,
.btn.registered:focus-visible {
  color: inherit;
  box-shadow:
    inset 0 calc(-1 * var(--btn-inset-size)) 0 0 transparent,
    0 0 0 0 var(--btn-hover-glow);
  transform: none;
}

.btn:focus-visible,
.primary:focus-visible,
.secondary:focus-visible,
.tertiary:focus-visible,
.pv-btn:focus-visible,
.pv-tile__register:focus-visible,
.account-trigger.nav-accent:focus-visible,
.auth-warn-cancel:focus-visible {
  outline: 2px solid var(--mint, #1bd3cb);
  outline-offset: 3px;
}

/* Tile register: keep reveal motion, skip lift so transform is not fighting */
.pv-tile__register {
  transition:
    opacity 240ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 240ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow var(--btn-hover-duration) var(--btn-hover-ease),
    color var(--btn-hover-duration) var(--btn-hover-ease),
    border-color var(--btn-hover-duration) var(--btn-hover-ease);
}

.pv-tile__register:hover,
.pv-tile__register:focus-visible {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .primary,
  .secondary,
  .pv-btn,
  .pv-tile__register,
  .account-trigger.nav-accent,
  nav a.nav-accent,
  .auth-warn-cancel {
    transition: none !important;
  }

  .btn:hover,
  .btn:focus-visible,
  .primary:hover,
  .primary:focus-visible,
  .secondary:hover,
  .secondary:focus-visible,
  .pv-btn:hover,
  .pv-btn:focus-visible,
  .pv-tile__register:hover,
  .pv-tile__register:focus-visible,
  .account-trigger.nav-accent:hover,
  .account-trigger.nav-accent:focus-visible,
  .auth-warn-cancel:hover,
  .auth-warn-cancel:focus-visible {
    box-shadow:
      inset 0 0 0 var(--btn-inset-size) var(--btn-inset-color),
      0 0.5em 0.5em -0.4em var(--btn-hover-glow);
    transform: none;
  }
}