.btn-primary {
  padding: 13px 24px;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: #111118;
  font-size: .95rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn-primary:hover {
  opacity: .9;
}

.btn-primary:active {
  transform: scale(.97);
}

.btn-full {
  width: 100%;
}

.btn-secondary {
  padding: 12px 24px;
  border-radius: var(--r-lg);
  background: var(--raised);
  color: var(--t2);
  border: 1px solid var(--bd-bright);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn-secondary:hover {
  background: var(--card);
  color: var(--t1);
}

.btn-danger {
  padding: 12px 24px;
  border-radius: var(--r-lg);
  background: rgba(248,113,113,.1);
  color: #f87171;
  border: 1px solid rgba(248,113,113,.3);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur) var(--ease);
}

.btn-danger:hover {
  background: rgba(248,113,113,.18);
}