/* -----------------------------------
   BUTTONS
----------------------------------- */

.btn {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;

  padding: 0.7rem 1.6rem;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  

  background: var(--color-card);
  color: var(--color-text);

  box-shadow:
    -4px -4px 10px rgba(255,255,255,0.8),
     4px  4px 10px rgba(0,0,0,0.12);

  transition: var(--transition);
}

.btn:hover {
  transform: translateY(-2px);
}

/* Primary */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  width: fit-content;
}

.btn-primary:hover {
  box-shadow:
    inset -3px -3px 8px rgba(255,255,255,0.25),
    inset  3px  3px 8px rgba(0,0,0,0.25);
}

/* Primary outline */
.btn-primary-outline {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-primary-outline:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Accent */
.btn-accent {
  background: var(--color-accent);
  color: #fff;
}
.btn-accent-outline {
  background: transparent;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
}
.btn-accent-outline:hover {
  background: var(--color-accent);
  color: #fff;
}

/* Gray / Neutral */
.btn-gray {
  background: var(--neutral-300);
  color: var(--color-text-muted);
}

/* Disabled */
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/*delete*/
.btn-delete{
  background: var(--color-error);
  color: #fff;
}

.btn-accent:focus{
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-primary:focus{
  outline: 1px solid var(--color-primary);
  outline-offset: 2px;
}