/**
 * 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-size: 0.78rem;
  --btn-font-size-sm: 0.72rem;
  --btn-line: 1;
  --btn-pad-y: 10px;
  --btn-pad-x: 16px;
  --btn-pad: var(--btn-pad-y) var(--btn-pad-x);
  --btn-pad-sm-y: 6px;
  --btn-pad-sm-x: 10px;
  --btn-pad-sm: var(--btn-pad-sm-y) var(--btn-pad-sm-x);
  /* border 1+1 + vertical pad + line box — keeps every .btn the same height */
  --btn-height: calc(var(--btn-pad-y) * 2 + var(--btn-font-size) * var(--btn-line) + 2px);
  --btn-height-sm: calc(var(--btn-pad-sm-y) * 2 + var(--btn-font-size-sm) * var(--btn-line) + 2px);
  --btn-font: 700 var(--btn-font-size) / var(--btn-line) var(--font-sans, "Manrope", "Segoe UI", Arial, sans-serif);
  --btn-hover-ease: cubic-bezier(0.77, 0, 0.175, 1);
  --btn-hover-duration: 400ms;
  --btn-inset-size: 10em;
  /* --btn-border / --btn-text (light + dark) live with the colour palette in tokens.css */
}

.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, var(--c-black));

  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, var(--c-black));
  background: transparent;
  outline: none;
  min-height: var(--btn-height);
  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: var(--btn-font-size-sm);
  min-height: var(--btn-height-sm);
}

/* Icon-only — same height as default / sm text buttons */
.btn.info-icon-btn,
button.btn.info-icon-btn {
  width: var(--btn-height);
  min-width: var(--btn-height);
  height: var(--btn-height);
  min-height: var(--btn-height);
  padding: 0;
  flex-shrink: 0;
}

.btn-sm.info-icon-btn,
button.btn-sm.info-icon-btn {
  width: var(--btn-height-sm);
  min-width: var(--btn-height-sm);
  height: var(--btn-height-sm);
  min-height: var(--btn-height-sm);
}

/* Square icon actions (table rows) — same height as .btn-sm */
.btn.btn-icon,
button.btn.btn-icon {
  width: var(--btn-height);
  min-width: var(--btn-height);
  height: var(--btn-height);
  min-height: var(--btn-height);
  padding: 0;
  flex-shrink: 0;
}

.btn-sm.btn-icon,
button.btn-sm.btn-icon {
  width: var(--btn-height-sm);
  min-width: var(--btn-height-sm);
  height: var(--btn-height-sm);
  min-height: var(--btn-height-sm);
  padding: 0;
}

.btn-icon__svg {
  display: block;
  flex-shrink: 0;
}

/* —— 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, var(--c-mint));
  --btn-hover-glow: color-mix(in srgb, var(--mint, var(--c-mint)) 40%, transparent);
  --btn-hover-text: var(--btn-text, var(--c-black));
  color: var(--btn-text, var(--c-black));
  background: var(--btn-gradient, linear-gradient(90deg, var(--c-mint), var(--c-white)));
  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, var(--c-black));
  border-color: var(--btn-border);
}

/* —— Secondary —— */
.secondary,
.btn.secondary,
button.secondary,
a.btn.secondary,
.auth-warn-cancel {
  /* Fill with current text color; label uses contrasting hover text (falls back to page --bg) */
  --btn-inset-color: var(--secondary-text, var(--text, var(--c-black)));
  --btn-hover-glow: color-mix(in srgb, var(--secondary-text, var(--text, var(--c-black))) 25%, transparent);
  --btn-hover-text: var(--secondary-hover-text, var(--bg, var(--surface, var(--c-white))));
  color: var(--secondary-text, var(--text, var(--c-black)));
  background: transparent;
  border-color: var(--btn-border);
}

.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);
}

/* —— Danger (destructive) —— */
.btn.danger,
button.danger {
  --btn-inset-color: var(--danger-text, var(--c-red-800));
  --btn-hover-glow: color-mix(in srgb, var(--danger-text, var(--c-red-800)) 25%, transparent);
  --btn-hover-text: var(--c-white);
  color: var(--danger-text, var(--c-red-800));
  background: transparent;
  border-color: var(--danger-text, var(--c-red-800));
}

.btn.danger:hover,
.btn.danger:focus-visible,
button.danger:hover,
button.danger:focus-visible {
  color: var(--btn-hover-text);
  border-color: var(--danger-text, var(--c-red-800));
}

/* —— Tertiary (ghost) —— */
.tertiary,
.btn.tertiary,
.btn.ghost,
.pv-btn--ghost {
  --btn-inset-color: var(--text, var(--c-black));
  --btn-hover-glow: color-mix(in srgb, var(--text, var(--c-black)) 25%, transparent);
  --btn-hover-text: var(--bg, var(--surface, var(--c-white)));
  color: var(--text, var(--c-black));
  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: var(--c-white);
  --btn-hover-glow: color-mix(in srgb, var(--c-white) 35%, transparent);
  --btn-hover-text: var(--bg, var(--c-black));
  color: var(--c-white);
  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, var(--c-black));
}

a.btn.secondary:not(:hover):not(:focus-visible),
a.secondary:not(:hover):not(:focus-visible) {
  color: var(--secondary-text, var(--text, var(--c-black)));
}

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, var(--c-black));
}

.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: var(--c-white);
}

/* 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, var(--c-black));
  background: color-mix(in srgb, var(--mint, var(--c-mint)) 12%, transparent);
  border-color: color-mix(in srgb, var(--mint, var(--c-mint)) 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(--focus-ring, currentColor);
  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;
  }
}