/* ============================================================
   Optiverse brand buttons — shared by the website and other surfaces

   Published at /brand/buttons.css. The website loads it from index.html
   (before the app CSS, so site-specific variants like .btn-small,
   .btn-large or contextual overrides still win); /brand/confirm.css
   @imports it. Uses only variables from tokens.css.
   ============================================================ */

.btn-primary {
  position: relative;
  white-space: nowrap;
  padding: 12px 23px;
  border-radius: var(--radius-full);
  background: var(--gradient-button);
  background-size: 180% 100%;
  background-position: 0% 0%;
  color: var(--text-on-accent);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: var(--btn-shadow);
  transition: background-position 0.6s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.3s;
}

.btn-primary:hover {
  background-position: 100% 0%;
  transform: translateY(-1px);
  box-shadow: var(--btn-shadow-hover);
}

.btn-primary svg { transition: transform 0.3s var(--ease-out); }
.btn-primary:hover svg { transform: translateX(3px); }

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary.full-width { width: 100%; }

.btn-secondary {
  white-space: nowrap;
  padding: 12px 23px;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid var(--border-light);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.btn-secondary:hover {
  background: var(--glass-bg-hover);
  border-color: var(--text-muted);
}